There are some examples that showcase the use of statechart in an Ember based application :
http://www.thesoftwaresimpleton.com/blog/2012/02/28/statemachine/
https://github.com/DominikGuzei/ember-routing-statechart-example
What is the difference between sproutcore-statechart in emberjs-addons and the ember.statemanager in ember-states lib ?
And if I'd like to use sproutcore-statechart with Emberjs, how can I set it up correctly ?
Ember has a new States system written from scratch. However, some users from the SC2 days were relying on SproutCore's Statecharts, so the "sproutcore-statechart" system brings that in. It's pretty much just for legacy use. I recommend that new users just use the built-in Ember States.
Some great new docs in code comment (by trek) on StateManager were merged just two days ago:
https://github.com/emberjs/ember.js/blob/master/packages/ember-states/lib/state_manager.js
Enjoy!
Related
This is more of an exploration question.
We have been using breeze.js in our projects for a while and have been quite satisfied with it; it ties nicely into concepts we already know and use (change tracking, metadata, backend agnostic...)
Now we are evaluating the possibility to move our front-end from backbone/marionette/knockout stack to ember.js (which seems to be more of a complete framework than a "pick-only-what-you-need" approach in backbone). We are exploring to possibility to keep using breeze.js as our data management layer on the client-front.
But how can the integration of models returned from the server (server stack: node.js + mongoDB) be done with models defined by ember.js?
A typical ember model definition could be:
var Person = Ember.Object.extend({
Property1: 'foo',
Property2: 'bar'
});
where you can see the extension "Ember.Object.extend"
Breeze.js upon receiving data from server attach a AspectEntity to them (and if Knockout is defined, wrap properties in observables ). How could returned objects somehow be "transformed" into ember.js objects?
Maybe the way we approach this problem and the way we think about this integration is totally wrong or that we should entirely reject this "ember-breeze" combo. From google search we have not found cases where breeze is used with ember.js or some guidance. That is why we come to the stackoverflow community: is it possible? what are the possible pitfalls to look ahead?
There does not seem to be much in the way of existing solutions. The Breeze.js User Voice has some 2-year-old issues that never got much traction; support from that library does not seem to be imminent.
I would recommend exploring Ember-Data as your data management layer. It supports many (if not all) of the concepts you mentioned, and it's the default recommended data library for Ember applications.
That said, as far as trying to make Breeze.js work, you could probably take the objects returned from Breeze and turn them into Ember.Objects using Ember.Object.create, but you'd have to build a layer between Breeze and Ember that essentially serializes between Breeze objects and Ember objects in both directions.
I can understand needing some abstraction layer for common operations like retrieving DOM elements, attribute manipulation, etc., but jQuery is a pretty massive library that seems like a lot of overkill for Ember.
After looking through the source code, there are only about 30 or so uses of jQuery in Ember and it looks like the majority of jQuery usage is simple selector calls, some events, and some DOM traversal.
Ember.$(rootElement).off('.ember', '**').removeClass('ember-application');
...
elem = this.$();
...
this.$().appendTo(target);
...
Ember.$(window).on('hashchange.ember-location-'+guid, function() {
etc.
Are there any other reasons Ember requires jQuery for every application?
Could these few uses be embedded into Ember and jQuery removed as a dependency?
The question was extremely well explained by Tom Dale (Ember Core Developer).
Essentially he says:
Ember.js requires jQuery for two reasons:
We rely on it heavily in the Ember/Handlebars integration for inserting and modifying DOM elements. I personally am not interested
in dealing with cross-browser DOM manipulation bugs, but the jQuery
team excels at it.
By having a standard DOM manipulation library in jQuery, developers can move between different Ember.js apps and rely on the fact that
they have a battle-tested, cross-platform library underneath them.
If you are concerned about size, I'd recommend investigating the new
jQuery 2.0, which has the ability to do custom builds without features
such as animation.
Makes a lot of sense to me.
Update:
Recently Erik Bryn (Ember Core Developer too) wrote a very interesting comment about the framework and mentioned the state of the art of jQuery usage in Ember projects.
Pasting the comment:
It's a common misconception that Ember.js is monolithic. I can assure
you that isn't actually true. You can pick and choose the parts of
Ember that you want or need (for example, the router is totally
optional). Our build tools even support picking and choosing which
packages you want. You can use it today without jQuery (you will need
to shim and have an event delegation library, or even easier use a
super-lightweight custom jQuery build).
Only Ember's view layer depends on jQuery. It was used more heavily historically than it is now. In the future, we could as you suggest, roll functionality into Ember itself, although we do not want to maintain cross-browser compatibility in Ember that jQuery is already taking care of. Another path, with jQuery 2.0, would be a way to create trimmer build of jQuery containing just the portions that Ember uses.
If there are no-compromise ways to replace instances of jQuery usage in Ember core, you should propose the changes as issues on GitHub.
I hate to ask such a newbie and vague question, but I imagine there must be others out there whose brains are also about to explode. I see related questions, but none that directly addresses my confusion.
I've just been introduced to Ember.js and I'm trying to learn the basics of the Router, but I can't find two sources that agree on how this is done. I suspect that I'm jumping in during an unstable transition. I'm using the latest 1.0.0-Pre.4 release.
The best I can figure, Router is the new mechanism, and possibly replaces StateManager - yes? Yet the classes listed under 1.0.0-Pre.4 API on the web site don't even list a Router object, nor does the guide make mention of it... yet, I get no complaints from javascript when I use sample code that extends Em.Router.
Ok cool, however it then barfs on the Router member "transitionTo" which is present in many of the demo projects, but is unrecognized in the current release.
So, I guess what I'm asking is not so much a direct question, as I am looking for a grounding point in a sea of contradictory information.
If starting out with Ember.js as it is RIGHT NOW (1.0.0-pre.4), with no history to contend with, what routing mechanism should I be looking at, and is there any tutorial or simple sample app that demonstrates and runs against this version of the library? Can you confirm my suspicion that the documentation is out-of-date in regard to routing?
Ember.js is a lot to learn, and if I ever hope to figure it out, I need to know what to ignore and what to embrace.
Thank you.
The best I can figure, Router is the new mechanism, and possibly replaces StateManager - yes?
Yes, Router is the new mechanism. It does not replace StateManager per-se. Early version of the Ember Router were based on StateManager. The new one (1.0.0-pre.4) is not, but StateManager is still an important part of the ember library. Many of ember's core components (models, views) rely are built on StateManager.
Yet the classes listed under 1.0.0-Pre.4 API on the web site don't even list a Router object, nor does the guide make mention of it... yet, I get no complaints from javascript when I use sample code that extends Em.Router.
The Router does not have API docs yet. I imagine these are in the works. When in doubt about a fast-moving open source project I always have a look at the tests. Ember has a really solid test suite, and in the case of routing you can learn a lot by reading through the integration tests here: routing/basic_test.js
Ok cool, however it then barfs on the Router member "transitionTo" which is present in many of the demo projects, but is unrecognized in the current release.
Sounds like those demo projects are out of date.
Can you confirm my suspicion that the documentation is out-of-date in regard to routing?
Re: the official docs I think both the API and Guides can be considered current, but be aware that not every ember feature has API docs so far. For sure there are many out-of-date sources floating around. Trek has been working to compile a list of out-of-date sources so that we can reach out to authors for a refresh. Here on Stack Overflow, anything related to the old router should now be tagged https://stackoverflow.com/questions/tagged/ember-old-router.
If starting out with Ember.js as it is RIGHT NOW (1.0.0-pre.4), with no history to contend with, what routing mechanism should I be looking at, and is there any tutorial or simple sample app that demonstrates and runs against this version of the library?
The ember team has been putting a lot of effort over the past few months into the Ember.js Guides - AFAIK they are all up to date WRT (1.0.0-pre.4) and are becoming more solid every day. They include a lot of detail about the new Router - see Ember.js - Routing for the most up-to-date information.
As for tutorials, there are several new ones that are worth a look. Check out this SO post for a few recommendations: Could someone point me to an ember.js project that uses the latest routing system? Bonus points if it uses ember-data as well
tip: build your own version of ember from master branch - they fixed few bugs :)
I'm making my first project with ember.js, and so far haven't been able to find any example projects that use the new routing system. All the examples from the ember docs use the old routing.
Also, I'd love to see an example of a project that uses Ember Data if anyone knows of one.
Thanks!
You can find an example project using ember 1.0.0 pre.4 here:
https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
There are plans to provide an ember-data version as well. Check here for details:
https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences/pull/9
Another great example can be found here:
https://github.com/dgeb/ember_data_example
Although not free Peepcode just released their "Fire Up Ember.js" which covers the most recent updates to Ember and is probably your best bet for a good introduction.
https://peepcode.com/products/emberjs
I have an ember, ember-data with a rails backend app that I have been working on https://github.com/kiwiupover/cookier updated to use ember 1.0.0 pre.4.
Have a look and let me know what you think.
Cheers
Also, you can check this series of tutorials: http://reefpoints.dockyard.com/ember/2013/01/07/building-an-ember-app-with-rails-api-part-1.html. Among other things, it covers new routing system and basics of ember-data.
Additionally, you can take a look at this video introduction to new router from Yehuda Katz: https://www.youtube.com/watch?v=4Ed_o3_59ME
I just started using Ember.js recently and I love the functionality. I'm wondering which UI toolkit you might be using to tie into design side of your applications.
For Bootstrap integration with Ember, take a look at this project I started two days ago:
https://github.com/ember-addons/bootstrap-for-ember
It really fun and easy to use and lightly integrate bootstrap and ember components altogether.
Personaly, I am using Twitter's bootstrap library, which is quite low level, but pretty clean.
Twitter Bootstrap is my preffered choice when it comes to UI especially when prototyping something quickly, recently i have started to use EmberJS and have looked into this as well. So far i have found https://github.com/emberjs-addons/ember-bootstrap
I will update this as my search continues.
Hope this helps with your project!
Twitter bootstrap is a great UI frameworks no doubts but I feel it is too mainstream these days. Hence my personal preference is Metro UI CSS, it's sleek and great for developing mobile applications using HTML5
I am just starting with emberjs also. Actually I use JQMobile. But I have some issues with it. As I want have a Mobile look and feel, I will try more.
But even if have not use bootstrap with EmberJs I think it will be easier to use as it's only css.
With a UI toolkit that use JavaScript and is owns attributs(exemple : data-role="List"... with JQuery Mobile) you can have rendering issues. I think this is because that Metamorphose/Handlebars and JQuery Mobile both modify the DOM on the fly and it can be tricky to get all work right.
But I am not a EmberJs or JQ Mobile Guru :-)
Sorry for my english, it isn't my mother tongue.
Just one Question .. what is a OSS framework and do you have the links on GitUb
This maybe old but I've used this addon on over 5 projects so far with great success. The project is well maintained and flexible. The maintainer is active and takes pull requests efficiently.
http://kaliber5.github.io/ember-bootstrap/
Disclaimer: I am not officiated with this project beyond that of an end consumer.
You could have a look at Ember Paper if you like Google Material:
http://miguelcobain.github.io/ember-paper/