Ember.js - A framework for creating ambitious apps

For D·Labs Tech Talk, April 2015

Transcript

1. Ember.js - a framework for creating ambitious web apps D·Labs Tech Talk April 2015 Matic Jurglič @matixmatix jurglic.si
2. Ember - open source client side web app framework - MVC - Single page app - 2-way binding - powerful router - computed properties - powerful templating system HTMLBars (previously Handlebars <- Mustache )
3. Ember - ES6 modules (the future is now!) - Convention over Configuration - Boilerplate code to the minimum (it auto- generates what it needs) - Promises - Intelligent view re-rendering within a runloop (backburner.js) - Enforcing the future of web!!!
4. Tools - Big pool of Ember Addons - Ember comes with everything you need, baked right in and pre-configured!
5. Tools
6. - Evolution: Sproutcore from Apple (MobileMe, iCloud) - Sproutcore 2.0 -> Ember.js - Lousy, unorganized, unversioned documentation - Unstable 6 Past
7. - Documentation still not perfect, but getting there - Still evolving quickly but upgrades are pretty much painless - Steady, organized releases: Stable | Beta | Canary - Used by: Heroku, Beatport, Microsoft, Discourse, Yapp, Square, ZenDesk,… - AWESOME COMMUNITY ❤️ 7 Present
8. - Open source community, but dictated by Yehuda Katz and Tom Dale 8 Present
9. My experience 9 - Beginning was hard (it’s much easier now, documentation is a lot better and they simplified some things (replaced Views in favour of components)) - … but it paid off!
15. 15 The Flow - URL gets parsed and Router triggers appropriate Route - Route loads necessary data and pushes it into the controller context - Template can read from controller context and inserts components (very similar to controllers)
17. 17 Router
18. 18 Route
19. 19 Controller
20. 20 Template
21. 21 Component - Components can have their own context (very similar to controllers), and must have their own template - They have no outer context, only what we inject (reusability!) - Can render other components
22. 22 Competitors? - Backbone.js (+ Marionette) - inefficient, passé - Angular.js • Build by Google, Ember is built by community • Interface is defined by HTML tags, decorated with attributes (‘data-ng-repeat’), Ember uses Handlebars (‘{{#each}}’)
23. 23 Competitors? - Angular.js • The more bound elements in your app, the slower it gets (because of “dirty checking” - with Ember computer properties that’s not the case)
24. 24 Competitors? - React.js • Used for Facebook widgets, Instagram Web • Most performant at the moment • Uses unidirectional data flow -> when setState is called, it re-renders everything (using virtual DOM and performing a diff against previous version). Ember uses Key-Value observation, which re-renders only specific parts
25. 25 Future?
26. 26 Ember 2.0 (June 2015!) - Glimmer - a new rendering engine with intelligent virtual DOM diffs - Fastboot - ability to load basic server side rendered templates without requiring JavaScript - for SEO, web crawlers & bots, then allow JavaScript to take over
27. 27 Demo time! - https://github.com/matixmatix/people-api - https://github.com/matixmatix/ember-people- demo