Post on 28-Jan-2015
description
transcript
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.
By HenryTao – http://henrytao.me
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
By HenryTao – http://henrytao.me
Why Do I Choose AngularJS?
Reusable Component
||
html + css + js
By HenryTao – http://henrytao.me
Why Do I Choose AngularJS?
By HenryTao – http://henrytao.me
PROBLEM!!.component .element{! /* To-do */!}!!$(‘.component .element’).trigger(‘click’);!
COMMON SOLUTION!.component > .element{! /* To-do */!}!!$(‘.component > .element’).trigger(‘click’);!
Why Do I Choose AngularJS?
By HenryTao – http://henrytao.me
meteor.com
derbyjs.com
polymer-project.org
angularjs.org backbonejs.org
Why Do I Choose AngularJS?
By HenryTao – http://henrytao.me
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.
By HenryTao – http://henrytao.me
I found you
AngularJS – The BEST World.
2 ways data binding
By HenryTao – http://henrytao.me
directive
testing
template routing
service
factory
dependency injection
SPAs
AngularJS – The BEST World.
By HenryTao – http://henrytao.me
BASIC 2 WAYS DATA BINDING!!// html!Hello {{username}}!!!// js!$scope.username = ‘John Doe’;!// html!Hello John Doe!!!// html!<input ng-model="username”>!!
AngularJS – The BEST World.
By HenryTao – http://henrytao.me
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.
By HenryTao – http://henrytao.me
AngularJS – The DARK World.
Over 2.500 data-binding
By HenryTao – http://henrytao.me
e2e testing with angular ui-router
too many template file
authentication
SEO reusable code
DOM
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
Sooooo Excited
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
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
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
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
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
too many template file
Use angular template cache
Convert all html template into javascript
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
DOM
Inject $window & $document
Add jQuery before Angular
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
authentication
Use $httpProvider.responseInterceptors
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
reusable code
Code structure
Use ng-boilerplate or ng-boilerplate-2
Use grunt / gulp for development life cycle
AngularJS Best Practices – The 3rd World.
MVC vs Module
By HenryTao – http://henrytao.me
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
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
By HenryTao – http://henrytao.me
è 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
By HenryTao – http://henrytao.me
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
By HenryTao – http://henrytao.me
Resources & References
By HenryTao – http://henrytao.me