The code is written in ES6 and transpiled with Traceur. There are also some additional (non-ES6) features of Traceur that I used, such as type annotation which is used by the Dependency Injection framework to figure out what to inject (it can also be used with assert library to do a runtime type checking). You could however write it in regular ES5, the only reason why I used ES6 was because I had gotten spoiled by having modules, classes, annotations and all the nice syntactic sugar...
# install all the deps npm install # transpile ES6 gulp build # run the example gulp serve
Yesterday, I saw a presentation about React and I finally got to play with it a little bit. I think it's an interesting framework. I really like some of the concept such as:
- separating the state and treating it as immutable,
- good encapsulation of the components,
- strict separation of rendering.
At first I was terrified by JSX (it reminded me PHP+HTML) and also the need to learn/remember all the methods and syntax. Pretty soon I however realized that it was actually not that bad and after a while I felt pretty comfortable with it. I think it's good to think of React components as a sort of view controllers, I wouldn't put much logic in there, just the "view" logic.
It's a lot of typing and not as descriptive as I would like it to be. In fact, it feels very close to writing UI components with good old jQuery. I'd like to describe my app in a more declarative way, without the boilerplate to please the browser, language, framework or whateva. Besides that, I can see how I would write UI components with React and I can see why it works well for Facebook.
- you don't need global state and therefore testing does not suck (easy mocking; no need to reset state and rather new instances of everything are created),
- you don't need to pass dependencies through your entire app.
React is a view layer, not full-blown framework. There is no routing, storage, forms, blahblabla... but I don't think that's bad. It just means you can use other tools with React. For instance, one could use Backbone model with it pretty easily. Or maybe once we modularize Angular better (it's coming in v2), one could any of the Angular services and React as the view layer, if you like. Anyway, the point is that wiring it up with DI would make this much simpler...
Some more ideas to do:
- allow passing additional providers to override default bindings,
- use child injectors, so that it's possible to have instances "per component".