Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
- 1. Escape the javascript fatigue
- 2. Who has never heard of ember?
- 3. Who had a look at ember?
- 4. Who tried it out?
- 5. Who is working with it?
- 6. What are your expectations of this talk?
- 7. Agenda Ember 101 Def. of Javascript fatigue Philosophy & Design ember vs. Angular Users & Opinions Ember Toolset The future of ember Conclusion Excursion: Glimmer.js
- 8. Ember 101 How ember works
- 9. Ember 101 Framework for ambitious web applications Former Model-View-Controller Made for Single Page Applications (SPA) A ember app is made of Templates (Handlebars) Components Controllers Router & Routes Models Services Serializers Adapters
- 10. Ember 101
- 11. Ember DEMO
- 12. Javascript fatigue What does it mean?
- 13. What is the Javascript (hype) fatigue? Ember, Angular, React, Express, Grunt, Bower, npm, Broccoli, Gulp, Lodash, Underscore, rxjs, Knockout, SocketIO, Threejs, D3, Backbone, Ionic, Angular2, React Native, Redux, Alt, Reflux, Webpack, Bluebird, Q, Express, Mocha, Jasmine, Chai, Koa, Less, Sass, Postcss, Impressjs, Revealjs.
- 14. What is the Javascript (hype) fatigue? ● too many options frequency of new starlets very high every framework claims it’s the best new frameworks solve problems and introduce new ones no stability and continuity boilerplates … boilerplates … even more boilerplates tooling is bad too many APIs too much configuration
- 15. Philosophy & Design What thought leaders think ember should look like
- 16. Philosophy & Design Focus on ambitious web applications
- 17. More productive out of the box Philosophy & Design
- 18. Stability without stagnation Philosophy & Design
- 19. Future web standard foresight Philosophy & Design
- 20. Convention over configuration Philosophy & Design
- 21. Don’t repeat yourself Philosophy & Design
- 22. ember vs angular A not so objective comparison
- 27. Conclusion Ember.js has nearly as much commits as Angular Angular is way more popular Ember.js has less issues
- 28. Is the most popular always the best? The ultimative question
- 29. Ember is certainly not the solution to all problems.* *) unsure about that...
- 30. Users & Opinions
- 31. 8.2 in average Would you recommend ember to a friend or colleague? *) 1600 users asked, scale from 1-10
- 32. I've worked with Ember professionally now for over 3 years, and select employment opportunities around whether or not I can continue working with it. While the community is smaller, the seamlessness of all the tooling and the overall developer experience is simply the best the open source community has to offer. My out of the box productivity on a new project and onboarding experience to new projects reaffirms so many decisions I didn't have to make. Reason for a 9.0 score
- 34. Tom Dale Software Engineer at Apple Creator of ember.js worked on MobileMe and iCloud Web SproutCore 2.0 Co-Found of tilde.io Working at LinkedIn Thought leaders Yehuda Katz Retired Member of Rails and jQuery Creator of ember.js Member of Rust Core Team Member of ECMA TC39 Thor, Handlebars, Bundler, Cargo Co-Found of tilde.io Working at tilde.io
- 35. Ember Toolset The framework alone is not enough
- 36. ember new <project> ember-cli create new projects generate stuff transpilation build pipeline addons and more
- 37. The app folder is merged ● the addon can provide any ember object ● the addon can hook into the build pipeline ● objects can be consumed by the application ● e.g. ember-bootstrap, ember-i18n The addon folder keeps the addons namespace ● ES6 files that can be imported in the main app ● Files that are used internally by the addon to keep the namespacing clear ● any object of the Main Project can be overwritten after Main Project /app Addon A /app /addon Addon B /app /addon Build app.js app.css Broccoli
- 38. emberobserver.com Addon repository with thousands of ranked addons. ember install ...
- 41. ember-data State handling, server agnostic Store, Serializers, Adapters Serializers: JSON API, Active Model, ... Adapters: localstorage, ember-pouch, graphql, emberfire, ...
- 42. ember-inspector Inspect the DOM, Routes, Models, Promises, the DI Container and more
- 44. liquid-fire Transitions and animations Sample 1 Sample 2 Sample 3
- 45. ember install fastboot Server Side Rendering
- 46. 1. initial request 2. HTTP(S) requests to the API 3. renders and responds with static HTML 4. requests the ember app 5. delivers the ember app 6. ember app dynamically takes over Fastboot - SSR process node.js VM express ember-fastboot REST API any platform EmberApp Browser 1 3 2 4 5 6
- 47. Fastboot in detail What is it? ● Addon for Server Side Rendering (SSR) ● static HTML delivered on first load, then the SPA takes over in the background ● completely node.js based ● integrated in ember-cli for development ● express middleware or fastboot-server for production How does it work? ● uses node.js VM-Module to dynamically run the ember app ● the SSR makes all API calls the client usually would make Changes in your app ● instance-initializers vs. initializers ● use the shoebox to prevent doubled API requests ● use fastboot-service to detect the environment ● use ember-network addon instead of plain $.ajax ● defer rendering if needed ● avoid jQuery ● be aware of some hooks that are not called (e.g. didInsertElement)
- 48. testing Acceptance, Unit and Integration tests with QUnit and testrunner.
- 49. ember-cli-mirage Mock server for development without backends
- 50. ember-simple-auth Authentication and session handling
- 53. The future of ember Hot things to come
- 54. Engines ⇒ mount engines at runtime with lazy loading Glimmer ⇒ fastest view rendering available Typescript ⇒ Opt-in support for JS that scales Module unifications ⇒ More modular core and smaller apps ES6 Classes Vanilla javascript can be used instead of custom object model Router as a service ⇒ open the router to all ember addons The future of ember
- 55. Conclusion How does ember cure the Javascript fatigue?
- 56. Due to the philosophy, users and toolset ember is the antidote to the javascript fatigue Conclusion
- 57. Revisited: What is the Javascript (hype) fatigue? ● too many options frequency of new starlets very high every framework claims is the best new frameworks solve problems and introduce new ones no stability and continuity boilerplates … boilerplates … even more boilerplates tooling is bad too many APIs too much configuration
- 58. Glimmer.js View rendering on speed
- 59. Glimmer.js embers rendering performance was debatable Glimmer = VM for DOM rendering (not a virtual DOM) Glimmer.js = Framework on top of the VM combined with the ember-cli create new apps with conventional project layout Typescript support generators for components and helpers small file size Glimmer VM is already included in ember
- 60. Glimmer DEMO