39
made with keynote Hello! @ladyleet

Ember.js - Harnessing Convention Over Configuration

Embed Size (px)

Citation preview

Page 1: Ember.js - Harnessing Convention Over Configuration

made with keynoteHello!

@ladyleet

Page 2: Ember.js - Harnessing Convention Over Configuration

made with keynote

@ladyleet

Have y’all ever experienced The Chimichanga?

https://www.youtube.com/watch?v=PUG5AqBD3T4

Page 3: Ember.js - Harnessing Convention Over Configuration

made with keynote

Now we can begin my talk!

@ladyleet

Page 4: Ember.js - Harnessing Convention Over Configuration

made with keynote

Do you know what wakes me up at the quack of dawn?

@ladyleet

Page 5: Ember.js - Harnessing Convention Over Configuration

made with keynote

JavaScript

@ladyleet

Page 6: Ember.js - Harnessing Convention Over Configuration

made with keynote

I want to tail about my experiences.

@ladyleet

Page 7: Ember.js - Harnessing Convention Over Configuration

made with keynote

Specifically, with

@ladyleet

Page 8: Ember.js - Harnessing Convention Over Configuration

made with keynote

Waddle she tell us?

@ladyleet

Page 9: Ember.js - Harnessing Convention Over Configuration

made with keynote

Swan’s she going to get to it?

@ladyleet

Page 10: Ember.js - Harnessing Convention Over Configuration

made with keynote

Right now, so wish me good duck.

@ladyleet

Page 11: Ember.js - Harnessing Convention Over Configuration

made with keynote

Hopefully, by the end of this presentation, you’ll be flocking to try Ember.

@ladyleet

Page 12: Ember.js - Harnessing Convention Over Configuration

Tracy Lee

@ladyleet github.com/ladyleet

modern-web.org medium.com/@ladyleet

@ladyleet

Page 13: Ember.js - Harnessing Convention Over Configuration

@ladyleet

Once upon a time I didn’t know how to code…

Page 14: Ember.js - Harnessing Convention Over Configuration

made with keynote

@ladyleet

And ember-cli.

Then I discovered Ember…

Page 15: Ember.js - Harnessing Convention Over Configuration

made with keynoteember-cli was able to help me build

apps immediately.

@ladyleet

Page 16: Ember.js - Harnessing Convention Over Configuration

@ladyleetmodern-web.org built with

Page 17: Ember.js - Harnessing Convention Over Configuration

@ladyleetventurehacked.com built with

Page 18: Ember.js - Harnessing Convention Over Configuration

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

Page 19: Ember.js - Harnessing Convention Over Configuration

made with keynote

Architect application Conventions of application

Compiler for ES6 Live reload / dev server

Testing Staging

Production @ladyleet

The Power and Conventions of Ember and Ember-CLI

App structure same for every app Follows community conventions BabelJS Out of the box! Creates tests for you! Out of the box! Out of the box!

Page 20: Ember.js - Harnessing Convention Over Configuration

made with keynote

Architect application Conventions of application

Compiler for ES6 Live reload / dev server

Testing Staging

Production @ladyleet

The Power and Conventions of Ember and Ember-CLI

App structure same for every app Follows community conventions BabelJS Out of the box! Creates tests for you! Out of the box! Out of the box!

Page 21: Ember.js - Harnessing Convention Over Configuration

made with keynote

Architect application Conventions of application

Compiler for ES6 Live reload / dev server

Testing Staging

Production @ladyleet

The Power and Conventions of Ember and Ember-CLI

App structure same for every app Follows community conventions BabelJS Out of the box! Creates tests for you! Out of the box! Out of the box!

Page 22: Ember.js - Harnessing Convention Over Configuration

made with keynote

Architect application Conventions of application

Compiler for ES6 Live reload / dev server

Testing Staging

Production @ladyleet

The Power and Conventions of Ember and Ember-CLI

App structure same for every app Follows community conventions BabelJS Out of the box! Creates tests for you! Out of the box! Out of the box!

Page 23: Ember.js - Harnessing Convention Over Configuration

made with keynote

Architect application Conventions of application

Compiler for ES6 Live reload / dev server

Testing Staging

Production @ladyleet

The Power and Conventions of Ember and Ember-CLI

App structure same for every app Follows community conventions BabelJS Out of the box! Creates tests for you! Out of the box! Out of the box!

Page 24: Ember.js - Harnessing Convention Over Configuration

made with keynote

Architect application Conventions of application

Compiler for ES6 Live reload / dev server

Testing Staging

Production @ladyleet

The Power and Conventions of Ember and Ember-CLI

App structure same for every app Follows community conventions BabelJS Out of the box! Creates tests for you! Out of the box! Out of the box!

Page 25: Ember.js - Harnessing Convention Over Configuration

made with keynote

Architect application Conventions of application

Compiler for ES6 Live reload / dev server

Testing Staging

Production @ladyleet

The Power and Conventions of Ember and Ember-CLI

App structure same for every app Follows community conventions BabelJS Out of the box! Creates tests for you! Out of the box! Out of the box!

Page 26: Ember.js - Harnessing Convention Over Configuration

made with keynote

As a beginner I didn’t have to make decisions.

I could look to the community for “the ember way”.

@ladyleet

Page 27: Ember.js - Harnessing Convention Over Configuration

made with keynote

The add-on ecosystem is a great example of how the ember community benefits greatly

from convention over configuration.

@ladyleet

Page 28: Ember.js - Harnessing Convention Over Configuration

@ladyleet

Page 29: Ember.js - Harnessing Convention Over Configuration

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.

@ladyleet

Page 30: Ember.js - Harnessing Convention Over Configuration

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

Page 31: Ember.js - Harnessing Convention Over Configuration

made with keynoteStable and reliable

Vertical growth > horizontal growth

@ladyleet

Main reasons I choose ember when deciding to build production apps

Page 32: Ember.js - Harnessing Convention Over Configuration

made with keynoteLet’s see how easy it is to get started!

@ladyleet

Page 33: Ember.js - Harnessing Convention Over Configuration

made with keynote$ npm install ember-cli

$ ember new <app-name>

@ladyleet

Installing the cli and creating a new app

Page 34: Ember.js - Harnessing Convention Over Configuration

made with keynoteNow, we code

@ladyleet

Page 35: Ember.js - Harnessing Convention Over Configuration

made with keynote

Creating a new app Structure of application Generating routes / components Basic use of ember’s router Using helpers Display data

@ladyleet

Building the application

Page 36: Ember.js - Harnessing Convention Over Configuration

made with keynoteadd-ons!

@ladyleet

Utilizing community resources

Page 37: Ember.js - Harnessing Convention Over Configuration

made with keynote

The power of ember-cli Convention over configuration The ember community The add-on ecosystem Add-on success stories How to get started with ember

What we went over today!

@ladyleet

Page 38: Ember.js - Harnessing Convention Over Configuration

@ladyleet

ResourcesGithub starter repo: https://github.com/ladyleet/ng-cruise-demo-ember

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

Page 39: Ember.js - Harnessing Convention Over Configuration

made with keynoteThank you!

@ladyleet