a tale of 3 clis - angular 2, ember, and react
TRANSCRIPT
![Page 1: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/1.jpg)
made with keynoteGoedemiddag!
@ladyleet
![Page 2: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/2.jpg)
@ladyleet
Bee === Bij
![Page 3: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/3.jpg)
@ladyleet
I hope this will bee funny.
![Page 4: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/4.jpg)
@ladyleet
Hap-bee!
![Page 5: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/5.jpg)
@ladyleet
Buzzed on over!
![Page 6: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/6.jpg)
@ladyleet
Born to bee wild!
![Page 7: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/7.jpg)
@ladyleet
![Page 8: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/8.jpg)
made with keynoteLet’s get warmed up!
@ladyleet
![Page 9: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/9.jpg)
@ladyleet
Can you bee-lieve we just did that?
![Page 10: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/10.jpg)
@ladyleet
Now that we’ve bee-n
warmed up, it’s time…
![Page 11: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/11.jpg)
@ladyleet
To learn what the buzz is about CLIs
![Page 12: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/12.jpg)
made with keynoteHow many of you use a cli tool?
@ladyleet
![Page 13: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/13.jpg)
@ladyleet
“2016 will be the year of the CLI”
- @rob_dodson, google developer advocate
polymer
![Page 14: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/14.jpg)
@ladyleet
My search for cli tools
![Page 15: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/15.jpg)
made with keynoteCLIs make web development accessible to everyone.
@ladyleet
![Page 16: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/16.jpg)
Tracy Lee
@ladyleet github.com/ladyleet
modern-web.org medium.com/@ladyleet
@ladyleet
![Page 17: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/17.jpg)
made with keynote
Today we’re going to talk about my three favorite clis!
ember-cli, angular-cli, and react-cli
@ladyleet
![Page 18: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/18.jpg)
Entrepreneur sold my startup Dishcrawl
Junior DeveloperPlaying with frameworks & JS
Traveling Entrepreneur New company, #digitalnomad
Who Knows?
@ladyleet
My Life
![Page 19: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/19.jpg)
made with keynoteI would not be doing development
if it weren’t for ember-cli
@ladyleet
![Page 20: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/20.jpg)
made with keynoteember-cli was able to help me build
apps immediately.
@ladyleet
![Page 24: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/24.jpg)
made with keynoteangular-cli was the same story.
@ladyleet
![Page 25: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/25.jpg)
@ladyleetbuilt with
![Page 26: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/26.jpg)
@ladyleetbuilt with
![Page 28: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/28.jpg)
made with keynotecreate-react-app (react-cli) was the same!
@ladyleet
![Page 29: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/29.jpg)
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
![Page 30: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/30.jpg)
@ladyleet
![Page 31: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/31.jpg)
made with keynote
Architect application Conventions of application Live reload / dev server Compiler for ES6 Testing Staging Production
@ladyleet
Setting up your dev environment
![Page 32: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/32.jpg)
made with keynote
Architect application Conventions of application Live reload / dev server Compiler for ES6 Testing Staging Production
@ladyleet
Setting up your dev environment
![Page 33: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/33.jpg)
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!
![Page 34: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/34.jpg)
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
![Page 35: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/35.jpg)
made with keynote
The Community
In the Ember community, because of conventions and standards,
a wealth of knowledge has emerged.
@ladyleet
![Page 36: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/36.jpg)
@ladyleet
![Page 37: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/37.jpg)
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
![Page 38: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/38.jpg)
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
![Page 39: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/39.jpg)
made with keynote
My favorite add-on success story
@ladyleet
angular-cli!
without ember-cli, angular-cli would not exist.
![Page 40: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/40.jpg)
made with keynote
React CLI?
@ladyleet
A previous iteration of a react-cli was built using ember-cli
![Page 41: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/41.jpg)
made with keynoteLet’s build some apps!
@ladyleet
![Page 42: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/42.jpg)
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>
![Page 43: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/43.jpg)
Scaffolding up the apps
@ladyleet
Here’s the journey we’re about to take
App structure
Creating components
Using the router (if any)
Forms
![Page 44: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/44.jpg)
made with keynote
First things first - an ember app
@ladyleet
![Page 45: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/45.jpg)
made with keynote
Next up - an Angular 2 app
@ladyleet
![Page 46: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/46.jpg)
made with keynote
Last one - a react app
@ladyleet
![Page 47: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/47.jpg)
Scaffolding up the apps
@ladyleet
Here’s the journey we’re about to take
App structure
Creating components
Using the router (if any)
Forms
![Page 48: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/48.jpg)
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
![Page 49: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/49.jpg)
made with keynoteDanke je!
@ladyleet
![Page 50: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/50.jpg)
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
![Page 51: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/51.jpg)
Tracy Lee
@ladyleet github.com/ladyleet
modern-web.org medium.com/@ladyleet
@ladyleet
![Page 52: A Tale of 3 CLIs - Angular 2, Ember, and React](https://reader033.vdocuments.net/reader033/viewer/2022052405/5872a1611a28ab07208b5cbd/html5/thumbnails/52.jpg)
made with keynoteDanke je!
@ladyleet