a tale of 3 clis - angular 2, ember, and react

made with keynoteGoedemiddag!

@ladyleet

@ladyleet

Bee === Bij

@ladyleet

I hope this will bee funny.

@ladyleet

Hap-bee!

@ladyleet

Buzzed on over!

@ladyleet

Born to bee wild!

@ladyleet

made with keynoteLet’s get warmed up!

@ladyleet

@ladyleet

Can you bee-lieve we just did that?

@ladyleet

Now that we’ve bee-n

warmed up, it’s time…

@ladyleet

To learn what the buzz is about CLIs

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

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 three favorite clis!

ember-cli, angular-cli, and react-cli

@ladyleet

Entrepreneur sold my startup Dishcrawl

Junior DeveloperPlaying with frameworks & JS

Traveling Entrepreneur New company, #digitalnomad

Who Knows?

@ladyleet

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

@ladyleetmodern-web.org built with

@ladyleetventurehacked.com built with

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

made with keynoteangular-cli was the same story.

@ladyleet

@ladyleetbuilt with

@ladyleetbuilt with

@ladyleetng2-rdu.firebaseapp.com built with

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

• Community • 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

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!

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

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

@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

React CLI?

@ladyleet

A previous iteration of a react-cli was built using ember-cli

made with keynoteLet’s build some apps!

@ladyleet

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>

Scaffolding up the apps

@ladyleet

Here’s the journey we’re about to take

App structure

Creating components

Using the router (if any)

Forms

made with keynote

First things first - an ember app

@ladyleet

made with keynote

Next up - an Angular 2 app

@ladyleet

made with keynote

Last one - a react app

@ladyleet

Scaffolding up the apps

@ladyleet

Here’s the journey we’re about to take

App structure

Creating components

Using the router (if any)

Forms

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

made with keynoteDanke je!

@ladyleet

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

Tracy Lee

@ladyleet github.com/ladyleet

modern-web.org medium.com/@ladyleet

@ladyleet

made with keynoteDanke je!

@ladyleet