a tale of 3 clis - angular 2, ember, and react
TRANSCRIPT
made with keynoteGoedemiddag!
@ladyleet
@ladyleet
Bee === Bij
@ladyleet
I hope this will bee funny.
@ladyleet
Hap-bee!
@ladyleet
Buzzed on over!
@ladyleet
Born to bee wild!
@ladyleet
made with keynoteLet’s get warmed up!
@ladyleet
@ladyleet
Can you bee-lieve we just did that?
@ladyleet
Now that we’ve bee-n
warmed up, it’s time…
@ladyleet
To learn what the buzz is about CLIs
made with keynoteHow many of you use a cli tool?
@ladyleet
@ladyleet
“2016 will be the year of the CLI”
- @rob_dodson, google developer advocate
polymer
@ladyleet
My search for cli tools
made with keynoteCLIs make web development accessible to everyone.
@ladyleet
Tracy Lee
@ladyleet github.com/ladyleet
modern-web.org medium.com/@ladyleet
@ladyleet
made with keynote
Today we’re going to talk about my three favorite clis!
ember-cli, angular-cli, and react-cli
@ladyleet
Entrepreneur sold my startup Dishcrawl
Junior DeveloperPlaying with frameworks & JS
Traveling Entrepreneur New company, #digitalnomad
Who Knows?
@ladyleet
My Life
made with keynoteI would not be doing development
if it weren’t for ember-cli
@ladyleet
made with keynoteember-cli was able to help me build
apps immediately.
@ladyleet
made with keynoteangular-cli was the same story.
@ladyleet
@ladyleetbuilt with
@ladyleetbuilt with
made with keynotecreate-react-app (react-cli) was the same!
@ladyleet
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
@ladyleet
made with keynote
Architect application Conventions of application Live reload / dev server Compiler for ES6 Testing Staging Production
@ladyleet
Setting up your dev environment
made with keynote
Architect application Conventions of application Live reload / dev server Compiler for ES6 Testing Staging Production
@ladyleet
Setting up your dev environment
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!
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
made with keynote
The Community
In the Ember community, because of conventions and standards,
a wealth of knowledge has emerged.
@ladyleet
@ladyleet
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
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
made with keynote
My favorite add-on success story
@ladyleet
angular-cli!
without ember-cli, angular-cli would not exist.
made with keynote
React CLI?
@ladyleet
A previous iteration of a react-cli was built using ember-cli
made with keynoteLet’s build some apps!
@ladyleet
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>
Scaffolding up the apps
@ladyleet
Here’s the journey we’re about to take
App structure
Creating components
Using the router (if any)
Forms
made with keynote
First things first - an ember app
@ladyleet
made with keynote
Next up - an Angular 2 app
@ladyleet
made with keynote
Last one - a react app
@ladyleet
Scaffolding up the apps
@ladyleet
Here’s the journey we’re about to take
App structure
Creating components
Using the router (if any)
Forms
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
made with keynoteDanke je!
@ladyleet
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
Tracy Lee
@ladyleet github.com/ladyleet
modern-web.org medium.com/@ladyleet
@ladyleet
made with keynoteDanke je!
@ladyleet