Comments (8)
Ey Arno,
I was sure you'd be the first in pointing something out :)
Well, I really wanted arrays to be arrays in Freezer but I needed it to be fast and using common arrays as I did in Curxor wasn't the way.
I need arrays but I also need to override the push
, pop
, splice
... methods to behave as immutable. In Curxor I instantiated an array for every node and then I add the methods one by one, and that made it slow, and, in a big tree, unsustainable.
So I need an Array "subclass" with all the methods already in its prototype to create the array objects. Just this change make Freezer 4x faster than Curxor. The problem is that in JS it is not possible to create a Subarray that inherits from Array and behaves like an actual Array object (see here).
If you try something like this you get an object.
subarr = Object.create( Array.prototype );
So arrays in Freezer are Array and Object at the same time, ( see the Object[5] output in your console). You can use it as if it was a real array, almost all Array methods are usable ( only concat is giving problems ) and also in your example:
// It's an instance of array
data.lg instanceof Array; // true
data.lg.constructor; // Array
But there some stuff you must know:
// It is not a real array
Array.isArray( data.lg ); // false
Object.prototype.toString( data.lg ); // [object Object]
// But it is easy to get one
Array.isArray( data.lg.slice() ); // true
// Concat method doesn't work as expected, maybe I override it in the future
data.lg.concat(3); // [Object[5], 3]
The most important thing to keep in mind with Freezer arrays is not to leave gaps on it and not to add non-numerical indexes to it, doing so would create an unexpected behaviour.
from freezer.
I was sure you'd be the first in pointing something out :)
Such an honor ;)
// It is not a real array
Array.isArray( data.lg ); // false
Yes, while using a third party library it is doing type checking I guess, so I get this error:
layouts.lg must be an array!
When trying
layouts: {lg: data.mylayouts.lg.slice()}
I get:
TypeError: Cannot assign to read only property 'i' of #<Object>
from freezer.
Unless somebody brings an idea on how to create Array subclasses or add methods to the array itself quickly Array.isArray( data.lg )
won't recognize freezer arrays as arrays.
The second error seems not to be in the slice
method, but in the assignation to an immutable object. That is the error you get when you try to add a new property to a immutable object.
If layouts
is an immutable object you need to
layouts = layouts.set({lg: data.mylayouts.lg});
It is much better and faster adding a reference to the pseudo-array object than cloning it using slice, even if you add an plain, it will be converter to a freezer array-like object.
Here you have a jsbin to play with freezer, and see how slice is working
http://jsbin.com/wavusonuda/3/edit?html,js,console
from freezer.
Yes, it's working that way. All in all: nice work! :) Closing this now.
from freezer.
Ey Arno, thanks for your feedback!
I have updated freezer and now you can use concat
as usual
var store = new Freezer( [1,2,3] ).get();
store.concat( [4,5] ); // returns [1,2,3,4,5];
But unfortunatelly it is still impossible to concat a freezer array to an actual array:
[4,5].concat( store ); // [4,5, [Object object] ]
Not having real arrays will give me a lot of user complaints in the future :P
from freezer.
Wow, this is a big gotcha! Is this still true? The Readme says Uses common JS array and objects to store the data, so you can use it with your favourite libs like lodash, underscore or ramda
, but as soon as a library would check Array.isArray
this wouldn't be true anymore right? Could you warn about this in the Readme? All I could found was Array nodes have modified versions of the push, pop, unshift, shift and splice methods
which to me sounds more like you did some patching on the Array.prototype[methods]
.
from freezer.
This is an old issue, freezer arrays are actual arrays for a long time now and Array.isArray
or Array.prototype.concat
are working as expected.
http://jsbin.com/jalereroho/edit?html,js,console
Keep in mind that Freezer stores immutable data so any modifier operations in freezer arrays won't update them:
var f = new Freezer([1,2,3]);
var arr = f.get();
arr.push(4);
console.log( arr ); // logs [1,2,3]
It is true than freezer's arrays have a modified version of those updated methods ( but not overriding Array.prototype as you commented, you can use common arrays and freezer together ), the modification is just to trigger an update in the Freezer object, so a new immutable data structure can be created with the update.
var f = new Freezer([1,2,3]);
var arr = f.get();
arr.push(4); // this will make f to update its data
console.log( arr ); // logs [1,2,3] still immutable
console.log( f.get() ); // logs [1,2,3,4]
from freezer.
That sounds great. Thank you.
from freezer.
Related Issues (20)
- Trigger returns undefined HOT 1
- multiple parents and node invariant check HOT 4
- Cannot sort arrays HOT 4
- always run in transact() mode HOT 4
- bug: nodes of value 0 get affected while updating its empty-array sibling HOT 1
- Typescript definition file HOT 4
- Store doesn't reset between launches. HOT 2
- state not updating when it should HOT 1
- Handle high frequency updates HOT 1
- JavaScript heap out of memory when using freezer-js HOT 2
- MS Edge compatibility issue with processQueue() HOT 6
- Set function is not working HOT 2
- Freezer: Can't add node to the tree. It's already added and freezer is configured to `singleParent: true`
- Object References and relations across state changes? HOT 1
- Bower version not updated HOT 2
- Best way to implement Provider / connect( ... ) for React components using freezer? HOT 2
- Parents reference of some children not updated after reset HOT 1
- Pivot on whole freezer object? HOT 3
- Interactive blog posts and documentation HOT 1
- Provide a warning when attempting to update the state of an outdated freezer object HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from freezer.