A RESTFul Day at the SPA with Taffy & Angular

By Abram Adams

@Abram_Adams

aadams@cfxchange.com

Overview

  • Learn what a SPA is
  • Explore what a RESTFul API is
  • Look at some of the building blocks Angular provides
    • Controllers
    • Services
    • Routing
    • Etc...
  • Identify some "Best Practices"
  • Build a SPA from the ground up using Angular 1.3
  • Build a RESTFul API using CFML via Taffy framework

What is a SPA?

"...is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application" - Wikipedia

This is in contrast to traditional web apps that rely on the Request/Response paradigm in which every page is requested from the server.

What is a RESTFul API?

“REST,   or REpresentational State Transfer,   is   a   method   for computer  programs  to  talk  to  each  other  over  networks.” -- Adam Tuttle, REST Web APIs: The Book

“It  is  a  set  of generalized conventions that make it easier for API-client developers to understand how to manage data over network protocols —like HTTP— with very little additional context and documentation”  -- Adam Tuttle, REST Web APIs: The Book

Perception of SPAs

Reality

Moral of the story: Use a Framework!

My Favorite SPA Stack

  • Front End:

    • Angular 
       

  • Back End:

    • CFML/Taffy

+

DEMO 1

Bootstrapping your Angular App

Recap So Far

  • Bootstrapped a simple Angular App
    • How to initialize Angular and your "app"
    • Showed simple bindings using ng-model
<html ng-app="app">
....
angular.module( 'app', [] );
....

Hello {{name}}!<br/>
<input ng-model="name">

DEMO 2

Angular Controllers

Structuring Your Project

By Feature

By Type

Recap So Far

  • Bootstrapped a simple Angular App
  • Added a Controller (and a functional list app)
    • Looked at the signature of a controller 
    • Dependency Injection
    • controllerAs syntax and concept of exposing variables to your model using a "View Model" scope vs $scope.
    • Adding your scripts to the index.html file

Good "starting point" Guide

  • https://github.com/johnpapa/angular-styleguide

DEMO 3

Angular Router (UI Router)

Recap So Far

  • Bootstrapped a simple Angular App
  • Added a Controller
  • Added a Router
    • Added a couple "states" for our app
    • Described Angular's "config" method
    • Added navigation to switch between states

DEMO 4

Angular Services/Factories

Recap So Far

  • Bootstrapped a simple Angular App
  • Added a Controller
  • Added a Router
  • Added a Service factory to grab data
    • Refactored our Controllers to use these new services.

Demo 5

The "Precious Collectibles" Store

Summary

  • Bootstrapping Angular App
    • Data binding using ng-model
    • Remember to load your js scripts in index.html!
  • Controllers
    • Use controllerAs syntax
    • Keep API at the top, implementation below
    • "expose" data to your view via View Model (vm)
  • Routes via UI Router 
    • States == Pages
    • Wire up controllers 
    • Nested states ( checkout.address, etc...)
  • Services Factories and Constants
    • Use Services to abstract interfacing with back-end data/services.
    • Cosntants for site-wide config

Break time!

~15 minutes

Up Next... Server Side API via CFML+Taffy

Review

  • Bootstrapping Angular App
    • Data binding using ng-model
    • Remember to load your js scripts in index.html!
  • Controllers
    • Use controllerAs syntax
    • Keep API at the top, implementation below
    • "expose" data to your view via View Model (vm)
  • Routes via UI Router 
    • States == Pages
    • Wire up controllers 
    • Nested states ( checkout.address, etc...)
  • Services Factories and Constants
    • Use Services to abstract interfacing with back-end data/services.
    • Cosntants for site-wide config

Server Side RESTFul API

via CFML+Taffy

CFML REST Framework

  • Easy to setup
  • Very low learning curve
  • Fantastic "dashboard" for developing and testing endpoints
  • Actually has documentation!

Framework site: http://taffy.io
documentation site: http://docs.taffy.io

Components of Our API

  • Taffy Framework
  • Application.cfc
  • Endpoint/Resources

Demo 6

Taffy Dashboard

Wait, that's it?

yup

Q & A

Resources

 

Angular: https://angularjs.org/

Angular Best Practices: https://github.com/johnpapa/angular-styleguide

Lucee: http://lucee.org/

Taffy: http://taffy.io

Adam Tuttle’s REST Web APIs; The Book: https://gumroad.com/l/rest-the-book
(Discount code "devobj15" for $4 off)

@Abram_Adams

aadams@cfxchange.com

THIS APP AND ALL DEMO CODE:

https://github.com/abramadams/devobjective-demos

deck

By Abram Adams

Made with Slides.com

deck

  • 1,168

More from Abram Adams