Upload
leo-hernandez
View
393
Download
3
Embed Size (px)
Citation preview
@leojh
Developing Single Page Applications with Ember.js
(or, How to Treat JavaScript Fatigue)
Leo HernandezDeveloper @ NinjaMSP
South FloridaJavaScript through Ember & React
@leojh
2015 … the year of JavaScript fatigue
@leojh
“mfw when I see everyone complaining about JavaScript tooling and micro
libraries”-- @trek on Dec 29th, 2015
@leojh
Just some of the contributors of JavaScript fatigueAngular, React
… new frameworks every
week
ES6/ES2015
… new standards coming out
all the time
Babel
WebPack, Browserfy
Bower, NPM
Node
Gulp and Grunt
… AND more
@leojh
It’s seemingly impossible to keep up
@leojh
Add to that, configuring all these things together
@leojh
1. Open your editor2. Make a folder3. Create a Git repo4. Configure Node5. Chose a Package Manager6. Configure your build7. Tie in Babel for ES6+8. Keep configuring9. …
10. Hopefully run your app sometime @leojh
Ember Offers an Alternative
@leojh
Ember is convention based
The Community picks the conventions
@leojh
Ember is provides an integrated application framework plus a build, and
development environment
@leojh
1. npm install -g ember-cli2. ember new my-app3. cd my-app4. npm install && bower install5. ember s
@leojh
That’s it… you’re coding
@leojh
All the build and configuration is done for you …
Integrated build, minification, source maps, environment variables …
@leojh
Ember has a few major concepts to know about ...
@leojh
ember-cli
Used to run commands on ember used for development
Run the serverRun your tests
Generate artifacts@leojh
Router
Defines your URLs
@leojh
Routes
Fetches and serves dataPlace for View Logic
@leojh
Models
Specify your DataPlace for Data Logic
Mutates Data
@leojh
Controllers
Use is discouragedPlace for additional View Logic
@leojh
Web Components
A big deal in the framework
They function with the premise of Data-Down-Actions-Up
@leojh
Templates
Your Components, Routes, and Application are marked up using HTMLBars
@leojh
Ember-Data
Like an ORM but for REST ApisFetches data to hydrate Models
Syncs local Models with API
@leojh
So a typical dev lifecycle is like this:
Using ember-cliCreate a Route and a ModelCreate a Component and TemplatesRender DataHandle User ActionsMutate DataSync your Data with your backend @leojh
Workshop
Go over most important Ember conceptsCreate a sample Contacts application
@leojh
Thank you!
Questions
@leojh