Download as PDF, PPTX
Uploaded byTracy Lee
A Tale of 3 CLIs - Angular 2, Ember, and React
The document discusses the importance of CLI tools in web development with a focus on three favorites: ember-cli, angular-cli, and create-react-app. It highlights how these tools help developers quickly set up projects, maintain standards, and leverage community-contributed add-ons. Additionally, it includes links to starter repositories for practical application and demonstrates the journey of building apps using these CLIs.
More Related Content
![[114]angularvs react 김훈민손찬욱](https://cdn.slidesharecdn.com/ss_thumbnails/114angularvsreact-161023163723-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to A Tale of 3 CLIs - Angular 2, Ember, and React
![Inclusive Architecture - Introducing the PAMstack - [Refactr.tech]](https://cdn.slidesharecdn.com/ss_thumbnails/refactr-190614202717-thumbnail.jpg?width=640&height=640&fit=bounds)
A Tale of 3 CLIs - Angular 2, Ember, and React
- 1.
- 2.
- 3. @ladyleet I hope thiswill bee funny.
- 4.
- 5.
- 6.
- 7.
- 8. made with keynote Let’sget warmed up! @ladyleet
- 9. @ladyleet Can you bee-lievewe just did that?
- 10. @ladyleet Now that we’ve bee-n warmedup, it’s time…
- 11. @ladyleet To learn whatthe buzz is about CLIs
- 12. made with keynote Howmany of you use a cli tool? @ladyleet
- 13. @ladyleet “2016 will bethe year of the CLI” - @rob_dodson, google developer advocate polymer
- 14. @ladyleet My search forcli tools
- 15. made with keynoteCLIsmake web development accessible to everyone. @ladyleet
- 16.
- 17. made with keynote Todaywe’re going to talk about my three favorite clis! ember-cli, angular-cli, and react-cli @ladyleet
- 18. Entrepreneur sold my startupDishcrawl Junior Developer Playing with frameworks & JS Traveling Entrepreneur New company, #digitalnomad Who Knows? @ladyleet My Life
- 19. made with keynote Iwould not be doing development if it weren’t for ember-cli @ladyleet
- 20. made with keynote ember-cliwas able to help me build apps immediately. @ladyleet
- 21.
- 22.
- 23.
- 24. made with keynote angular-cliwas the same story. @ladyleet
- 25.
- 26.
- 27.
- 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.
- 31. made with keynote Architectapplication Conventions of application Live reload / dev server Compiler for ES6 Testing Staging Production @ladyleet Setting up your dev environment
- 32. made with keynote Architectapplication Conventions of application Live reload / dev server Compiler for ES6 Testing Staging Production @ladyleet Setting up your dev environment
- 33. made with keynote Architectapplication 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 Ashort 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 TheCommunity In the Ember community, because of conventions and standards, a wealth of knowledge has emerged. @ladyleet
- 36.
- 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-onSuccess 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 Myfavorite add-on success story @ladyleet angular-cli! without ember-cli, angular-cli would not exist.
- 40. made with keynote ReactCLI? @ladyleet A previous iteration of a react-cli was built using ember-cli
- 41. made with keynote Let’sbuild 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 theapps @ladyleet Here’s the journey we’re about to take App structure Creating components Using the router (if any) Forms
- 44. made with keynote Firstthings first - an ember app @ladyleet
- 45. made with keynote Nextup - an Angular 2 app @ladyleet
- 46. made with keynote Lastone - a react app @ladyleet
- 47. Scaffolding up theapps @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 Dankeje! @ladyleet
- 50. made with keynote Links @ladyleet StarterRepositories 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.
- 52. made with keynote Dankeje! @ladyleet