How to refactor and
build re-usable components in Angular.js



       


Quick Intro

  • Rob Pocklington
  • Full-stack developer my whole career (12 years)
  • been using J-Query and Javascript for 5+ years
  • Backbone.js for almost 2 years
  • Angular.js for the same






    • Thanks for having me here




    Overview

  • Clean Code + Refactoring
  • Problem Areas + Code Tips
  • Example App + Code Review
  • Directives in Angular.js
  • Create a shared component
  • Releasing shared components

    • What is clean code?

  • Intuitive
    File layout is important

  • Consistent
    Keep names in sync

  • Clearly separated
    components

  • Building blocks
    Small, modular, testable code

    • Single Page App Development

  • Basics - HTML / CSS / Javascript
  • Use Bower + Grunt / Gulp
  • Developing IS refactoring!
  • Re-usable components come from refactoring

    • Refactoring Tools

  • Team - Tech huddle etc.
  • Pairing
  • IDE Intellij etc.
  • Tests
  • CLI / REPL

    • Refactoring Anti-Patterns

  • Building a framework / DSL (just 'cause)
  • Bounded refactor
  • Cowboy refactor


    • Refactoring in Angular.js

  • Get fast developer feedback!  < 8 secs

  • A place for everything
    Routes, controllers, views, directives, models, factories and services

  • Tests
    Simple / Service / Controller / Directive

    • Anti-Patterns & Problem areas

  • Controllers - the dumping ground
  • Copy / Paste / #Fail
  • Models - often under-utilised
  • rootScope - c'est pour rien

    • Common Refactors

  • Views => ng-include
  • View Logic => Controller
  • Controller Code => Service
  • Controller + View Code => Directive

  • Clean Code Tips

  • Don't embed an angular view in index.html
  • Question the use of ng-controller

  • Use controllerAs syntax in controllers

  • Make services return promises
  • Use resolve to load view-dependent data

    • UI / UX Clean Code Tips

  • agree on form validation patterns early
  • do page interaction diagrams
  • Prefer no popups / modals
  • notifications: ensure they survive a route change
  • give each view CSS which matches the state name
  • CSS is code too

    • Personal suggestions  (Y.M.M.V)

  • Use a yeoman generator for scaffolding your app
  • init methods for controllers / stateful services
  • Declare routes and resolves with controllers

    • Example app walkthrough







  • Code Review







  • Directives: shared components

  • Directives in Angular.js can be hard
  • but they can save you a heap of time ...

  • writing tests for directives can also be hard
  • but then you can safely change your code ...

  • extracting directives from your codebase can be tricky
  • but then you can version and release it independently

    • Lets make a shared component


  • Coding time!



    Releasing a Directive

  • an example is mandatory!
  • instructions are important
  • so are documentation and license info

    • As a Directive Author

  • don't use xyz fancy library just 'coz
  • aim for the lowest version support you need
  • view templates - inline or compiled
  • use isolated scope
  • test on all the browsers

    • Tools that help

  • Grunt / Gulp
  • Karma
  • JS-Hint
  • JS Beautify
  • Coveralls
  • Travis CI

  • That's it!

  • Questions?