Delivering with ember.js
1 like•421 views
The document discusses the development and advantages of using Ember.js for building complex web applications, emphasizing its community-driven philosophy of stability without stagnation. It highlights key features such as convention over configuration, computed properties, and Ember Data for managing model data, while addressing concerns about modern application complexity and JavaScript fatigue. Ember's commitment to maintaining up-to-date features without requiring extensive rewrites is underscored, making it a strong choice for front-end applications.
Delivering with ember.js
- 3. They used EmberJS to build a product
- 4. ABOUT ME Market-like apps Lots of events Time critical User interactions are not that complex Application Suite Occasional events Responsive CRM-like features User interactions are somewhat complex Large number of development teams Consumer apps Rare events Device tailored custom experience Focused User interactions are very complex
- 5. Instead of working on my app, I ▸ Hooked a Router ▸ Configured Webpack / Whatever ▸ Set up a testing solution ▸ Put together the best environment ▸ Tweaked that environment aka REINVENTING THE WHEEL
- 6. EXCITEMENT
- 8. “I probably had my personal moment of truth around the beginning of Doom 3's development, when it became clear that it is no longer possible to deeply understand every single part of a modern application. There is just too much...” https://raw.githubusercontent.com/ESWAT/john-carmack-pl an-archive/master/by_year/johnc_plan_2007.txt
- 10. TODAY’S AGENDA Ember.js from a business perspective Ember.js from a developer’s perspective TechnoMagicDemo
- 11. Why should you care about Ember?
- 12. Why should you care about Ember? Because getting the latest and greatest often means rewriting parts of your apps once a year, as the community abandons existing solutions in search of improvements.
- 15. Core philosophy: Stability without stagnation Identify common patterns that emerge from the web development community and roll them into a complete front-end stack.
- 16. The Ember community works hard to introduce new ideas with an eye towards migration. This makes it easy to get started on new projects and jump into existing ones. Core philosophy: Stability without stagnation
- 17. The direction in which the framework is taken does not depend on a particular business choice. No Angular 2 fiasco. Not driven by a company
- 18. AN INDUSTRY SHIFT Components “Unidirectional data flow” Virtual DOM Isomorphic apps
- 19. The request for comments process is intended to provide a consistent and controlled path for new features to enter the framework. Changes done via RFC
- 21. React’s true innovation COMPONENTS* * Predictable unidirectional data flow, explicit mutation, component boundaries, lack of two-way binding
- 22. Transition to 2.X - Ember CLI - ES6 Modules - Revamped components with “virtual DOM” - API simplification - and a lot more
- 23. Transition to 2.X “Hopefully, this plan demonstrates that staying on the cutting-edge can be done without rewriting your app. There are a huge number of Ember apps in production today, and we're looking forward to a time in the very near future where they can start to take advantage these new features.” https://github.com/emberjs/rfcs/pull/15
- 24. Ember comes with - separation of concerns - object model (classes, inheritance, mixins) - router - observers - computed properties - isolated components - container - templating system - run loop
- 27. 2.9.0 2.10beta 2.8.0 2.9beta 2.7.0 2.8beta 2.6.0 2.7beta 2.8LTS2.4LTS Sep 23Aug 12Jul 1May 20 2.5.0 2.6beta 2.4.0 2.5beta master 2.3.0 Jan 15 Canary Beta Release LTS 2.4beta Feb 26 Apr 8 LTS releases will receive critical bugfixes for 6 release cycles (36 weeks). LTS releases will receive security patches for 10 release cycles (60 weeks). Ember’s release channels
- 28. Ember-cli provides - Package manager - Directory structure and file naming conventions - Build system (broccoli) - jsHint on every run - Livereload - Module system - ES6 transpilation - Generators - Test Framework - Addon system
- 29. CONVENTION OVER CONFIGURATION Decrease the number of decisions that developers need to make, gaining simplicity, but not necessarily losing flexibility.
- 30. CONVENTION OVER CONFIGURATION A developer only needs to specify unconventional aspects of the application.
- 31. CONVENTION OVER CONFIGURATION The combination of conventions over configuration, Glimmer, and DDAU means that Ember developers can easily find the sweet spot of having both productivity and performance.
- 32. npm install -g ember-cli ember new demo-playground ember s
- 33. let’s start a business
- 34. Recap ▸ We wrote some code
- 35. 2 groups of components Container Components act like the “backend of the frontend” in a way. They are “connected” to the datasource and delegate to other components for any html that is rendered on the page.
- 36. 2 groups of components Presentational Components render HTML given some object/data
- 37. 2 groups of components Container Components and Presentational Components vs. Business Components and Toolkit Components
- 38. EMBER 2.X DATA DOWN, ACTIONS US
- 39. COMPUTED PROPERTIES Computed properties let you declare functions as properties. It takes one or more normal properties and creates a new value. They observe any changes made to the properties they depend on and are dynamically updated when they're called They can be chained.
- 42. Ember Data Ember Data is a library for managing model data in Ember. It’s designed to be agnostic to the underlying persistence mechanism, so it works just as well with JSON APIs over HTTP as it does with streaming WebSockets or local IndexedDB storage. ember install ember-data
- 43. Ember Data Ember Data is a library for managing model data in Ember. It’s designed to be agnostic to the underlying persistence mechanism, so it works just as well with JSON APIs over HTTP as it does with streaming WebSockets or local IndexedDB storage. XHR XHR returns Promise Resolves with JSON Promise Resolves with Record find() find() Application Store Adapter Network
- 44. Ember Data Ember Data is a library for managing model data in Ember. It’s designed to be agnostic to the underlying persistence mechanism, so it works just as well with JSON APIs over HTTP as it does with streaming WebSockets or local IndexedDB storage.
- 45. Ember FastBoot Convention over config isomorphic apps. FastBoot works by running your Ember application in Node.js. When a user visits your site, the initial HTML is rendered and served to the user. ember install ember-cli-fastboot
- 46. Ember Redux You can use Redux together with React, or with any other view library. ember install ember-redux http://www.ember-redux.com/ddau/
- 47. Ember comes with For a heavy RESTful front- end apps, Ember is the best framework. It cuts out almost all boiler plate and makes many convention based decisions for you. http://emberjs.com/
- 48. THANKS! Any questions? You can find me at @Andrei_Cimpean