Ember-CLI, Angular-CLI, and Create-React-App are necessities to web development, and many who have not had exposure to such wonderful technologies wonder what they are actually missing. This talk will show you how easy it is to scaffold up all 3 projects in less than 30 minutes, how to shave days, even weeks, off your development cycle, and why you should choose convention over configuration.
17. made with keynote
Today we’re going to talk about
my three favorite clis!
ember-cli, angular-cli, and react-cli
@ladyleet
18. Entrepreneur
sold my startup Dishcrawl
Junior Developer
Playing with frameworks & JS
Traveling Entrepreneur
New company, #digitalnomad
Who Knows?
@ladyleet
My Life
19. made with keynote
I would not be doing development
if it weren’t for ember-cli
@ladyleet
29. made with keynote
• Why these tools are important
• Development environment
• Setting up a project
• Community
• Add-ons
• Success stories
• Creating and deploying an application
• Live code up some apps!
What we’re going to talk about!
@ladyleet
31. made with keynote
Architect application
Conventions of application
Live reload / dev server
Compiler for ES6
Testing
Staging
Production
@ladyleet
Setting up your dev environment
32. made with keynote
Architect application
Conventions of application
Live reload / dev server
Compiler for ES6
Testing
Staging
Production
@ladyleet
Setting up your dev environment
33. made with keynote
Architect application
Conventions of application
Compiler for ES6
Live reload / dev server
Testing
Staging
Production
@ladyleet
The clis do it for you!
App structure same for every app
Follows community conventions
BabelJS / TypeScript
Out of the box!
Creates tests for you!
Out of the box!
Out of the box!
34. made with keynote
A short list of the awesome (there’s more)
@ladyleet
Tree shaking
Route generation
Component generation
Model generation
Tests (unit, acceptance, e2e)
Sass/less support
Add-ons
Package.json
Bower.json
* these are in some or one of the clis
35. made with keynote
The Community
In the Ember community, because of
conventions and standards,
a wealth of knowledge has emerged.
@ladyleet
37. made with keynote
$ ember install <ember-addon>
Ember-cli allows you to install add-ons into your
application and directly imports other build
systems without configuration.
The benefit of conventions.
@ladyleet
38. made with keynote
Add-on Success Stories
@ladyleet
ember-data - data layer for your Ember apps
ember-cli-deploy - deployment pipeline
ember-cli-mirage - client-side HTTP server to
develop, test and demo your Ember app
39. made with keynote
My favorite add-on success story
@ladyleet
angular-cli!
without ember-cli, angular-cli would not exist.
40. made with keynote
React CLI?
@ladyleet
A previous iteration of a react-cli
was built using ember-cli
42. made with keynote$ npm install -g ember-cli
$ ember new <app-name>
@ladyleet
$ npm install -g angular-cli
$ ng new <app-name>
Installing the cli and creating a new app
$ npm install -g create-react-app
$ create-react-app <app-name>
43. Scaffolding up the apps
@ladyleet
Here’s the journey we’re about to take
App structure
Creating components
Using the router (if any)
Forms
47. Scaffolding up the apps
@ladyleet
Here’s the journey we’re about to take
App structure
Creating components
Using the router (if any)
Forms
48. made with keynote
• Why these tools are important
• Development environment
• Setting up a project
• Community
• Add-ons
• Success stories
• Creating and deploying an application
• Live code up some apps!
What we went over today!
@ladyleet
50. made with keynote
Links
@ladyleet
Starter Repositories
Angular Jeopardy in ReactJS
https://github.com/ladyleet/angular-jeopardy-react
Angular Cruise in EmberJS
https://github.com/ladyleet/ng-cruise-demo-ember
Banana JavaScript in Angular 2
https://github.com/ladyleet/bananajs
Note: Download the master branch (starter) but check out the completed branches