The document discusses Ember.js, a framework for building ambitious web applications, outlining its core concepts, usage, benefits, and drawbacks. It emphasizes the importance of Ember CLI, which streamlines project setup and management, and provides insights on when to use or avoid Ember.js based on project complexity and requirements. Future developments and community involvement in Ember, along with practical advice for developers, are also highlighted.

1. EMBER.JS
JAK ZATOPIT A NESHOŘET!
Viliam Elischer
@vire

2. AGENDA
Introduction
Concepts
Usage
Experience
Pros/Cons
Future

3. “Ember.js - A framework for creating
ambitious web applications.”

4. WHAT IS A FRAMEWORK?

5. “A software framework, in computer
programming, is an abstraction in which
common code providing generic
functionality can be selectively overridden
or specialized by user code providing
specific functionality.”
ref

6. makes doing the right thing feel good
is built on top of maximally flexible primitives
evolves with the best practices of the community
nurtures a feedback loop that helps features iterate as
shared understanding develops

7. Current version: 1.11.1 (I really love ones!)
In December 2011 Sproutcore 2.0 was renamed to Ember.js

8. CORE CONCEPTS

9. NAMING CONVENTIONS
default main entry point:
app/app.js
app/routes/application.js
app/controllers/application.js
app/templates/application.hbs

10. example: yourdomain.com/favorites
app/routes/favorites.js
app/controllers/favorites.js
app/templates/favorites.hbs

11. BUILDING BLOCKS
| Router | Routes | Templates | Models | Components |
| Controllers | Views | Helpers |

12. ROUTER

13. Simple definitions
Router.map(function() {
this.route('about');
this.route('favorites', { path: '/favs' });
});
or nested
Router.map(function() {
this.route('posts', { path: '/posts' }, function() {
this.route('new');
});
});

14. ROUTES

15. You define a router.js
Router.map(function() {
this.route('posts');
this.route('post', { path: '/post/:post_id' });
});
and a route app/routes/post.js
export default Ember.Route.extend({
model: function(params) {
return $.getJSON("/api/posts/" + params.post_id + ".json");
}
});

16. MODELS
Supermarine Spitfire LF Mk. IXE - No. 312 (Czechoslovak) Squadron RAF

17. TEMPLATES
Designed to describe the UI in a meaningful way:
Expressions {{age}}
Outlets {{outlet}}
Components {{my-component}}
Helper {{t "user.edit.title"}}

18. given a controller has a people property:
export default Ember.Controller.extend({
people: [{name:'Yehuda'}, {name:'Tom'}, {name:'Trek'}]
});
then the following template
<ul>
{{#each person in people}}
<li>Hello, {{person.name}}!</li>
{{/each}}
</ul>
results into:
<ul>
<li>Hello, Yehuda!</li>
<li>Hello, Tom!</li>
<li>Hello, Trek!</li>
</ul>

19. COMPONENTS

20. CONTROLLERS, VIEWS, HELPERS

21. WHEN EMBER?
“When you realize that $elector-driven
development is too painful”

22. REASON
like:
the complexity of the project is causing chaos
your company is starting a new project (!)
you're planning to extend an existing project
a start-up occurred
it will help to eliminate technical debt

23. USE CASE
complex data-model / data-structure
big-data app view layer (multiple data sources)
conversion operations (e-commerce)
media processing (audio, image, video)
dashboard, monitoring / conflagration capability
B2B or B2C app for daily usage (ERP, CRM, etc.)

24. WHEN EMBER NOT?

26. overkill - scope, time, productivity, learning
time pressure
unclear added value (why?)
more dynamic than required - complication, productivity
loss
customer/stakeholder requests a framework
not required, like
static presentation e.g. opening hours, menu, contacts

27. EXPERIENCE

28. EMBER-CLI
$ npm install ­g ember­cli

30. Swiss-army command-line interface & ember's killer feature
out-of-the-box project scaffold via:
blueprint generator:
auto-rebuild when file changes & live-reload
transpile (ES6, sass, less, coffee)
minify, concat
$ ember new my­project­name
$ ember generate component my­component

31. managed dependencies | package.json, bower.json
single point of configuration: Brocfile.js
configurable build profiles:
dev , test , production , ci , ...
broccoli: fast, reliable asset pipeline, constant-time
rebuilds
easy import of 3rd party libraries
ember-cli-addon / export and import support for
fragments, project, 3rd party addons etc
$ bower install ­­save moment
app.import('bower_components/moment/moment.js');

32. FINDINGS & HANDY ADVICE

33. default project layout is not ideal (solution: pods)
adjusting to ember-cli wasn't trivial before version 0.1.0
different DI mechanism than Java
ember plays great with viz technologies svg (d3), canvas

34. we gave suggestions for improvements, still in progress :(
we expected i18n, currently only as 3rd party lib
result of build can't be split into desired artifacts
this is a good requirement for server side rendering, to
avoid adding business logic in client code

35. I've tried to replace QUnit with Jasmine...

37. sketch idea first (whiteboard/draw.io), code later
make POCs before you invest a lot of effort...
try to spent few days, or a week developing some small
functionality with a framework and check if you're are
comfortable

38. DON'T FORGET TO WRITE UNIT TESTS
There is no excuse to not write unit tests,
just your laziness.

39. PRO ET CONTRA

40. PROS
community, contributions, ecosystem - github, irc, forum
conventions - speeds up development, minimize faults
multiplatform support (browser, iOS/android, phone)

41. PROS
ES6, ES7 syntax support via babel.js
TDD support for unit & acceptance tests, testem, CI
Mature API (2.0 soon)
Batteries included - a lot functionality is ready for use

42. PROS
dozens of ember-cli addons will save time & bugs
backend agnostic (node, java, ruby, php, python, .net?)
ready for Functional reactive programming (RxJS)

43. CONS
learning takes longer
QUnit as default test-framework (see ember-cli-mocha!)
lazy loading of custom (route/template/model) is N/A

44. CONS
attention intensive / you need to check what's going on
absence of out-of-the-box i18n support
modifications are nontrivial - custom test runner, task
runner, test framework

45. WHY DO I THINK THAT IS EMBER
AWESOME?

46. BECAUSE:
DevX - intuitive, clean code, COC, DRY, KISS
Stability without stagnation principle
Tooling ember-cli & ember inspector
Is organized into 14D releases, many new features
Makes common tasks easy to complete (screen, widget)
Ember has vision, roadmap, architecture

47. COMING SOON

49. AND MORE
ember 2.0
Server Side Rendering / SSR via Fastboot
Ember Services / Improved DI
HATEOAS powered dynamic app generation
Ember RFCs - github.com/emberjs/rfcs

50. Q&A

51. www.joinzoom.com