35
made with keynote Good Evening! @ladyleet
| Date post: | 22-Jan-2018 |
| Category: |
Technology |
| Upload: | tracy-lee |
| View: | 434 times |
| Download: | 0 times |
made with keynoteGood Evening!
@ladyleet
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 this weekend
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 two favorite clis!
ember-cli and angular-cli
@ladyleet
Entrepreneur sold my startup Dishcrawl
Junior DeveloperPlaying with frameworks & JS
Traveling Entrepreneur New company, #digitalnomad
Who Knows? LYFE. #YOLO
@ladyleet
Bit About 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
@ladyleetangular2-router-demo.firebaseapp.com built with
made with keynote
• Why these tools are important • Development environment • Setting up a project
• Community • Ember 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
Ember-cli & Angular-cli do it for youApp 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 ember-cli or angular-cli
made with keynote
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
What about Angular 2 add-ons?
Coming soon.
@ladyleet
made with keynoteLet’s build an app!
@ladyleet
made with keynote$ npm install ember-cli
$ ember new <app-name>
@ladyleet
$ npm install angular-cli
$ ng new <app-name>
Installing the cli and creating a new app
made with keynoteLet’s get into some code!
@ladyleet
made with keynote
• Why these tools are important • Development environment • Setting up a project
• Community • Ember add-ons • Success stories
• Creating and deploying an application • Live code up some apps!
What we went over today!
@ladyleet
@ladyleet
Resources
Github starter repo: https://github.com/ladyleet/yolobrolo-ember-demo
App on Heroku: http://yolobrolo-ember-1.herokuapp.com/
Setting up a basic Ember.js app: https://medium.com/@ladyleet/setting-up-a-basic-ember-js-app-c9323760c675#.df609as7e
Video: https://www.youtube.com/watch?v=-Ury2S9Y-4Q
Tracy Lee
@ladyleet github.com/ladyleet
modern-web.org medium.com/@ladyleet
made with keynoteThank you!
@ladyleet
