This document summarizes Tracy Lee's presentation on her three favorite CLI tools: Create React App, Angular CLI, and Ember CLI. She discusses how CLI tools make web development accessible, allow automatic set up of development environments, and handle tasks like compiling and testing. Tracy explains how the tools architect applications, provide live reloading, and allow adding addons. She demonstrates creating new projects with each CLI tool and shares some projects she built with them.

1. made with keynote
Goedemiddag!
@ladyleet
Passion is energy.
Feel the power that comes from
focusing on what excites you.
- Oprah

2. Twitter: @ladyleet
Co-Founder: This Dot
Previously: Dishcrawl
Organizer: Ng-Cruise
Podcaster: Modern Web
Blog: medium.com/@ladyleet
Google Developer Expert: Angular
Speaker:
NgPoland, AngularUp,
AngularConnect, DevFestNL,
Silicon Valley Code Camp,
ReactNLConf, LondonJS,
AngularZone, UtahJS, GEMConf,
The Ember Show, TriangleJS,
RTP AngularJS, Angular Berlin,
EmberJS SF, Triangle EmberJS
Tracy Lee @ladyleet

3. made with keynote
Today we’re going to talk about
my three favorite clis!
create-react-app, angular-cli, ember-cli
@ladyleet

4. made with keynote
How many of you use a cli tool?
@ladyleet

5. “2016 was the
year of the CLI”
- @rob_dodson,
google developer advocate
polymer
@ladyleet

6. My search for cli tools
@ladyleet

7. made with keynoteCLIs make web development
accessible to everyone.
@ladyleet

8. made with keynote
I would not be doing development
if it weren’t for ember-cli
@ladyleet

9. made with keynote
ember-cli was able to help me build
apps immediately.
@ladyleet

10. modern-web.org built with @ladyleet

11. venturehacked.com built with @ladyleet

12. i-love-rainbows.herokuapp.com built with
@ladyleet

13. made with keynote
angular-cli was the same story.
@ladyleet

14. built with @ladyleet

15. built with @ladyleet

16. ng2-rdu.firebaseapp.com built with @ladyleet

17. made with keynote
create-react-app (react-cli) was the same!
@ladyleet

18. 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

19. @ladyleet

20. made with keynote
Architect application
Conventions of application
Live reload / dev server
Compiler for ES6
Testing
Staging
Production
Setting up your dev environment
@ladyleet

21. made with keynote
Architect application
Conventions of application
Live reload / dev server
Compiler for ES6
Testing
Staging
Production
Setting up your dev environment
@ladyleet

22. made with keynote
Architect application
Conventions of application
Compiler for ES6
Live reload / dev server
Testing
Staging
Production
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!
@ladyleet

23. made with keynote
A short list of the awesome (there’s more)
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
@ladyleet

24. made with keynote
The Community
In the Ember community, because of
conventions and standards,
a wealth of knowledge has emerged.
@ladyleet

25. @ladyleet

26. 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

27. 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

28. made with keynote
My favorite add-on success story
angular-cli!
without ember-cli, angular-cli would not exist.
@ladyleet

29. made with keynote
React CLI?
A previous iteration of a react-cli
was built using ember-cli
@ladyleet

30. made with keynote
Let’s see how easy it is to
create apps with the clis.
@ladyleet

31. 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

32. made with keynote
First things first - an ember app
@ladyleet

33. made with keynote
Next up - an Angular app
@ladyleet

34. made with keynote
Last one - a react app
@ladyleet

35. 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

36. made with keynote
Links
Starter Repositories
React Jeopardy in ReactJS
https://github.com/ladyleet/react-jeopardy-jdays
Angular Cruise in EmberJS
https://github.com/ladyleet/ember-example-app
JavaScript Fatigue in Angular
https://github.com/ladyleet/javascript-fatigue
Note: Download the master branch (starter) but check out the completed branches
@ladyleet

37. @ladyleet
Twitter @ladyleet
Github @ladyleet
Medium @ladyleet
www.ladyleet.com
www.thisdot.co
Tracy Lee

38. ngcruise.com - May 29th! - Miami - Caribbean