Angular Best Practices v2

Best Practices From Nutshell To Awesome Thing

By HenryTao – http://henrytao.me – version 2.0

henrytao-me/angular-best-practices

By HenryTao – http://henrytao.me

Github

Agenda

¡  Who I Am? Why Do I Choose AngularJS?

¡  AngularJS – The BEST World.

¡  AngularJS – The DARK World.

¡  AngularJS Best Practices – The 3rd World.

¡  The Future Of AngularJS.

¡  Resources & References.


Who I Am?

Technical lover.

Love to build awesome product.

Passion about Entrepreneur-Ship.

Believe that we can make a better world.

Keep dreaming – Keep acting – Be realistic.

Co-founder, Front-end developer at Coral.io – Making scene of data


Why Do I Choose AngularJS?

Reusable Component

||

html + css + js




PROBLEM!!.component .element{! /* To-do */!}!!$(‘.component .element’).trigger(‘click’);!

COMMON SOLUTION!.component > .element{! /* To-do */!}!!$(‘.component > .element’).trigger(‘click’);!



meteor.com

derbyjs.com

polymer-project.org

angularjs.org backbonejs.org



Testing

people often don’t know what they don’t know

people don’t feel they have a problem until they understand the problem

the beauty of CI – Continuous Integration

AngularJS – The BEST World.


I found you


2 ways data binding


directive

testing

template routing

service

factory

dependency injection

SPAs



BASIC 2 WAYS DATA BINDING!!// html!Hello {{username}}!!!// js!$scope.username = ‘John Doe’;!// html!Hello John Doe!!!// html!<input ng-model="username”>!!



BASIC DIRECTIVE!!// html element!<a href=‘http://angularjs.org’>html element</a>!!// custom attribute directive!<a ng-href=‘http://{{address}}’>html element</a>!!!

AngularJS – The DARK World.


AngularJS – The DARK World.

Over 2.500 data-binding


e2e testing with angular ui-router

too many template file

authentication

SEO reusable code

DOM

AngularJS Best Practices – The 3rd World.


Sooooo Excited



Over 2.500 data-binding

Use pagination

Never binding function

Cache data with _.memoize

Use module ux-angularjs-datagrid

Use ng-if instead of ng-show



e2e testing with angular ui-router

Angular ui-router still not work perfect with e2e testing

Setup protractor with selenium support

Use ghostdriver headless browser (phantomjs) on CI

Consider casperjs for e2e testing



too many template file

Use angular template cache

Convert all html template into javascript



DOM

Inject $window & $document

Add jQuery before Angular



authentication

Use $httpProvider.responseInterceptors



reusable code

Code structure

Use ng-boilerplate or ng-boilerplate-2

Use grunt / gulp for development life cycle


MVC vs Module




seo

pre-render with phantomjs

http://localhost/#!/routing/to/somewhere http://localhost/?_escaped_fragment_=/routing/to/somewhere

looking for something cool in the future

Prerender.io

Brombone.com


è Re-structure ng-boilerplate. è Use module approach. è Communicate through API. è Frontend: AWS S3 / NodeJS … è Backend: Java. è grunt, bower, less, uglify, jshint, cssmin,

htmlmin, watch, livereload, usemin, ngmin, protractor, selenium webdriver, mocha, phantomjs.

Coral.io solution

What’s Next With Angular 2.0?

¡  Airbnb – Rendr Backbone in apps in the browser and Node.

¡  jQuery on nodejs with cheerio

¡  Polymer-project Web component

¡  AngularJS 2.0 Server-side prerendering Simplify directive Animation


Resources & References

¡  AngularJS style guide (see here)

¡  Best practices from father of AngularJS (see here)

¡  ng-boilerplate (see here)

¡  Airbnb prerender backbone (see here)

¡  AngularSEO from yearofmoo (see here)

¡  AngularJS full testing with Karma from yearofmoo (see here)

¡  AngularJS Video from egghead.io (see here)

¡  AngularJS Best Practices – offically (see here)

¡  AngularJS Experiment (see here)

By HenryTao – http://henrytao.me All images were got from http://google.com

Resources & References


Angular Best Practices v2

Technology

Transcript of Angular Best Practices v2