the tale of the 3 clis - jdays2017
TRANSCRIPT
made with keynoteGoedemiddag!
@ladyleet
Passion is energy.
Feel the power that comes fromfocusing on what excites you.
- Oprah
Twitter: @ladyleetCo-Founder: This DotPreviously: DishcrawlOrganizer: Ng-CruisePodcaster: Modern WebBlog: medium.com/@ladyleetGoogle Developer Expert: AngularSpeaker:NgPoland, AngularUp, AngularConnect, DevFestNL, Silicon Valley Code Camp, ReactNLConf, LondonJS, AngularZone, UtahJS, GEMConf, The Ember Show, TriangleJS, RTP AngularJS, Angular Berlin, EmberJS SF, Triangle EmberJSTracy Lee @ladyleet
made with keynote
Today we’re going to talk aboutmy three favorite clis!
create-react-app, angular-cli, ember-cli
@ladyleet
made with keynoteHow many of you use a cli tool?
@ladyleet
“2016 was the year of the CLI”
- @rob_dodson,google developer advocate
polymer
@ladyleet
My search for cli tools
@ladyleet
made with keynoteCLIs make web development accessible to everyone.
@ladyleet
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
built with @ladyleet
built with @ladyleet
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
• Creating and deploying an application• Live code up some apps!
What we’re going to talk about!
@ladyleet
@ladyleet
made with keynote
Architect applicationConventions of applicationLive reload / dev serverCompiler for ES6TestingStagingProduction
Setting up your dev environment
@ladyleet
made with keynote
Architect applicationConventions of applicationLive reload / dev serverCompiler for ES6TestingStagingProduction
Setting up your dev environment
@ladyleet
made with keynote
Architect applicationConventions of application
Compiler for ES6Live reload / dev server
TestingStaging
Production
The clis do it for you!
App structure same for every appFollows community conventionsBabelJS / TypeScriptOut of the box!Creates tests for you!Out of the box!Out of the box!
@ladyleet
made with keynote
A short list of the awesome (there’s more)
Tree shakingRoute generationComponent generationModel generation
Tests (unit, acceptance, e2e)Sass/less supportAdd-onsPackage.jsonBower.json
* these are in some or one of the clis
@ladyleet
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
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
@ladyleet
made with keynote
My favorite add-on success story
angular-cli!
without ember-cli, angular-cli would not exist.
@ladyleet
made with keynote
React CLI?
A previous iteration of a react-cliwas built using ember-cli
@ladyleet
made with keynoteLet’s see how easy it is tocreate apps with the clis.
@ladyleet
made with keynote$ npm install -g ember-cli$ ember new <app-name>
$ 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>
@ladyleet
made with keynote
First things first - an ember app
@ladyleet
made with keynote
Next up - an Angular app
@ladyleet
made with keynote
Last one - a react app
@ladyleet
made with keynote
• Why these tools are important• Development environment• Setting up a project
• Creating and deploying an application• Live code up some apps!
What we went over today!
@ladyleet
made with keynote
LinksStarter Repositories
React Jeopardy in ReactJShttps://github.com/ladyleet/react-jeopardy-jdays
Angular Cruise in EmberJShttps://github.com/ladyleet/ember-example-app
JavaScript Fatigue in Angularhttps://github.com/ladyleet/javascript-fatigue
Note: Download the master branch (starter) but check out the completed branches
@ladyleet
@ladyleet
Twitter @ladyleet
Github @ladyleet
Medium @ladyleet
www.ladyleet.com
www.thisdot.co
Tracy Lee
ngcruise.com - May 29th! - Miami - Caribbean