Intro to EmberJS
- 1. Intro to EmberJS Billy Onjea & Jeff Sturgis
- 2. Roadmap 1. What is EmberJS? - 5min 2. Ember core concepts - 15min 3. Ember Data - 10min 4. Ember CLI - 5min 5. Ember in action & Questions - 25min
- 4. A JavaScript framework for Single Page Applications Loosely based on model-view-controller - MVC Convention over configuration, one way to do things => The Ember Way It’s like an SDK for the web, made up of various packages and tooling > Single Page Apps are distinguished by their ability to redraw specific parts of the UI without requiring a browser refresh.
- 5. Ember is made up of three high-level projects Ember MVC-like Ember Data ORM-like Ember CLI Node tool Top level framework namespace and all core objects exist here ● Ember ● Ember.Object ● Ember.Application ● Ember.Router ● Ember.Route ● Ember.Component Everything data related is under the DS namespace. It’s like an ORM for JavaScript ● DS ● DS.Model ● DS.Store ● DS.Adapter ● DS.JSONAPISerializer ● DS.JSONSerializer Ember’s command line utility provides us with project automation ● Provides generators ● Builds assets in dist/ ● Minifies JS and CSS ● Transpiles & compiles ● Supports addon system
- 7. Core concepts Project structure File/Folder Purpose app/ This is where your app’s models, routes, controllers, components, templates, styles, and others are stored. bower_components/ & bower.json Bower is a dependency management tool. Used in Ember CLI to manage front-end plugins. config/ The config directory contains the environment.js where you can configure settings for your app. dist/ When we build our app for deployment, the output files will be created here. node_modules/ & package.json This directory and file are from NPM. NPM is the package manager for NodeJS. Ember is packaged as various node modules and depends on other modules. public/ Contains assets such as images and fonts tests/ Automated tests for our app go here vendor/ This is where front-end dependencies go (JS and/or CSS) that are not managed by Bower. ember-cli-build.js This file describes how Ember CLI should build our app
- 8. Core concepts Your app’s directory File/Folder Purpose app/app.js Entry point - the first module executed app/router.js Routes here map to app/routes/ app/routes/*.js Route handlers - respond to URL changes (singletons) app/models/*.js Models - defines entity attrs and relations app/components/*.js Component views app/templates/*.hbs HTML/Handlebar templates app/controllers/*.js Controllers (singletons) app/styles/*.scss Contains your SASS styles app/adapters/*.js Determine how data is persisted to backend API app/serializers/*.js Format data before sent or received from API app/**/* Other directories like helpers/, services/, initializers/ ...
- 9. Core concepts From a URL path to rendered HTML Ember will generate instances of various types automatically, if the files aren’t created: Ember.Route Ember.Controller Ember.Component ...
- 10. Core concepts Ember container Every Ember application has a container. It’s a collection of an app’s long-lived objects, organized by a standardized key: route:posts template:posts component:blog-post Then in your app you would look up specific types using this key: “route:posts” Ember Inspector
- 11. Core concepts Ember resolver The DefaultResolver defines the default lookup rules to resolve container lookups: templates are looked up on Ember.TEMPLATES other names are looked up on the application after converting the name. For example, ”controller:post” looks up App.PostController by default. Note: Ember-CLI based apps use a resolver that is es6 module aware.
- 12. Ember Data
- 13. A library that integrates tightly with Ember Easy interface to CRUD models from/to your server as JSON Included by default when you create a new Ember app Can be configured to work with any backend via its adapter pattern Provides a single store as the central cache for models in your app
- 14. Ember Data Ajax request The first time your application asks the store for the record, a server round trip is made. Caching On subsequent requests, the promise resolves with the record immediately! The store has cached the record - no server round trip. 2 1
- 15. Ember Data Models Ember models are classes that define the attributes, relationships, and behavior of your data. Records A record is an instance of a model that contains data loaded from the server.
- 16. Ember Data Adapter An adapter is an object that translates requests from Ember, such as "find the user with an id of 1", into requests to a server. For example, if your app asks for a Person with an id of 1, how should Ember load it? Over HTTP or a WebSocket? If HTTP, is the URL /person/1 or /resources/people/1?
- 17. Ember CLI
- 18. A CLI for Ember apps - aliased as ember Built with Node and heavily depends on the Broccoli build tool Uses Babel to transpile and convert ES6 modules to AMD modules Compiles SASS, LESS, handlebar templates, concatenates, minifies, etc. Provides generators, addon system, deployment utils, dev/test server, etc. More info at ember-cli.com
- 19. Ember CLI Available commands Command Purpose ember Prints out a list of available commands ember new <app-name> Creates app directory and generates app’s structure ember build Builds the application into the dist/ directory ember server Starts a web server at http://localhost:4200 ember g model <model- name> Generates model files app/models/model-name.js tests/unit/models/model-name-test.js ember g component <component-name> Generates component files app/components/component-name.js app/templates/components/component-name.js tests/integration/components/component-name-test.js ember g route <feed> Generates route files app/routes/feed.js app/templates/feed.hbs Updates app/router.js tests/unit/routes/feed-test.js ... a lot more commands...
- 20. Ember CLI ember-cli-build.js This is our app’s build configuration file. Here we can specify if we want to use SASS or LESS, import additional files, and more. In this example first we installed the SASS ember addon with: > ember install ember-cli-sass Compiles into: dist/assets/app.css
- 21. Ember in action Let’s generate an app!
Editor's Notes
- #11: With Server Side Apps, all off the client-side state would be wiped out and re-created on every HTTP request. With Single Page Apps, frameworks need a place to store an application’s long-lived objects and a standardized way to look them up. This is why the idea of a container exists. Dependencies (singletons and factories) can be looked up and used as needed.
- #12: The Ember container uses the DefaultResolver under the hood to look up instances and to resolve factories. Example: owner.lookup('component:my-component) instanceof owner.resolveRegistration('component:my-component') //=> true
- #14: JSON API standardizes how JavaScript applications talk to servers The store automatically caches records. If a record had already been loaded, asking for it again will always return the same Model instance. This minimizes the number of round-trips to the server, and allows your application to render its UI to the user as fast as possible.