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.

1. made with keynote
Goedemiddag!
@ladyleet

2. @ladyleet
Bee === Bij

3. @ladyleet
I hope this will bee funny.

4. @ladyleet
Hap-bee!

5. @ladyleet
Buzzed on over!

6. @ladyleet
Born to bee wild!

7. @ladyleet

8. made with keynote
Let’s get warmed up!
@ladyleet

9. @ladyleet
Can you bee-lieve we just did that?

10. @ladyleet
Now that we’ve
bee-n
warmed up,
it’s time…

11. @ladyleet
To learn what the buzz is about CLIs

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

13. @ladyleet
“2016 will be the
year of the CLI”
- @rob_dodson,
google developer advocate
polymer

14. @ladyleet
My search for cli tools

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

16. Tracy Lee
@ladyleet
github.com/ladyleet
modern-web.org
medium.com/@ladyleet
@ladyleet

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

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

21. @ladyleetmodern-web.org built with

22. @ladyleetventurehacked.com built with

23. @ladyleeti-love-rainbows.herokuapp.com built with

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

25. @ladyleetbuilt with

26. @ladyleetbuilt with

27. @ladyleetng2-rdu.firebaseapp.com built with

28. made with keynote
create-react-app (react-cli) was the same!
@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

30. @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

36. @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

41. made with keynote
Let’s build some apps!
@ladyleet

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

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

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

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

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

49. made with keynote
Danke je!
@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

51. Tracy Lee
@ladyleet
github.com/ladyleet
modern-web.org
medium.com/@ladyleet
@ladyleet

52. made with keynote
Danke je!
@ladyleet