CFObjective notes: Navigating the Front-End Ocean - Sam Farmer

May 16, 2013

Navigating the Front-End Ocean - Sam Farmer

Before you build an app, ask 3 questions
1. what are you building?
-- an app? for internal users? just a web form? that's used once a day? never again? daily?

2. What devices are you supporting?
-- are all your users on Chrome w/ 23" monitors? Do you have to support IE7? What mobile devices?

3. What skills do you have?
-- a team of junior dev's that haven't done much JS? veterans? are you looking to hire people?

3 ways to build front-end apps today
1. HTML / JavaScript
-- thinking first about HTML, then adding some JS

2. JavasScript on HTML
-- writing SOME html, but most of your time is in JS

3. Just JavaScript
-- don't write ANY html, your JS framework does all of that for you

HTML5 / CSS techniques

Grids
-divide the page with DIV tags and float/width them to wherever you want

Media Queries
-Rules in CSS
-Really made Responsive Design possible
-Write an HTML page once, define rules in CSS, the page will follow the CSS rules based on its size
(Dan Vega is doing a talk on Responsive Apps w/ Bootstrap on Saturday.)

CSS Processors
-Variables, functions in css
-compile in browser or on server
-- lessCSS
-- SASS
-- both CSS processors that help with this

Templating
mustache.js
PURE
Others: handlebars, EJS, underscore

Just JavaScript
-No HTML
-Define EVERYTHING in JS
--ExtJS, Sencha touch, YUI, dojo, SproutCore, Cappuccino

Event Listeners (jQuery, angular)
standard way to wire up code to the app
but you RELY on the user actually clicking the button before that "thing" happens
can't just link to it
to solve that, use "routing / deep linking"
# and on stays in the browser
listen to changes and fact
REST inspired
built into lots of frameworks
http://www.site.com/#/user/200
Sammy -- library for routing

Ajax
-- pros and cons
-- each time you do ajax, it's a NEW connection to the server
-- no way to have data sent from the server, can only "poll"

Websockets
immediacy - operates over TCP
smaller data packets
push and pull
disadvantage: average browser support
-- doesn't work with everything
-- the version that ships with CF10 falls back to a Flash option for older browsers

zepto, xui
MICRO frameworks that do jQuery-esque things, specialized for mobile browsers
-- don't support older browsers

Data Storage
Forms
RecordSets

Models
-- define model and relationship in JS
-- frameworks keep in sync w/ server, any time the model changes, it sends a request down from the server
-- problem keeping in sync w/ data is volatile.
if i edit 10 users, take a coffee break, someone else loads those same 10 users to edit, my content may be out of date
-- very important when having multiple needs for data

Browser Storage
useful for user preference data
-- if it's really detailed / big, you can just get it right out of the browser
-- if you're doing a mobile app, you can store, say, high scores in the browser directly.
Backbone, Ember, Angular, dojo -- all provide support for Models

Framework Patterns
Back-end favorite is MVC
doesn't quite work as well on front-end
Front end MV*
todomvc.com

Backbone
Angular
Ember
YUI

Which and when?
Websites / single forms -- HTML w/ JavaScript
Applications -- some kind of JS framework
App with more of an HTML feel (bootstrap, etc) -- use a "JavaScript on HTML" framework
Desktop feel -- "Just JavaScript" framework
Free / Open Source - anything will work
Some "Just JS" frameworks have a fee associated with them
Complexity varies
-- in general, the further you go toward "just js" the more complex it gets
-- but that depends on your background
-- OO dev's may like that better than messing with HTML files

Beyond the Browser
we can create mobile phone apps w/ all the libraries we just mentioned
the "web view" approach
-- take html / js
-- styling options from native-like to own
-- access native features
Matt Gifford is giving a talk on PhoneGap at CFO

Conversion to Native
-- write it in JS
-- can use Titanium, which will convert it into NATIVE code
-- Similar concept to PhoneGap

Testing

Unit Testing
over 47(!) unit testing frameworks for js
no reason NOT to do it
qUnit -- what the jQuery team uses
-- works similar to MX Unit
-- can just put all your tests in a .html file and call them as regular JS blocks of code
-- straight forward, very easy to do

Selenium
-- browser tests
-- options for automation
-- record what you're doing in the browser, then you can run that test any time you want.
-- can run the test against different browsers (set it up on a server)

Testaccular (sp?)
-- any time there is a change to the code, it will automatically re-run your tests

JS stuff is still at a "teenager" level
--- lots of activity, not a lot of backward compatibility everywhere