Front End @ uShip




“Pretty sure you 

made that word up.”

Front end


User ⇆ Back end


Everything that happens 
in a browser:

Appearance

Interaction

Performance

Front end stack


HTML

CSS

Javascript

What it's not

Design

Scripting

Back end

An afterthought



“You can hide a mess on the back end if it's fast.
You can't hide a mess on the front end.”

—Nathan H. Jones, M.D., Ph.D.

When you need it


If you want to make a product end-to-end


If you want to build anything nontrivial


If you want to work anywhere that does anything neat on the internet


Front end 

vs. 

Back end

Optimization


Back end

Database bottlenecks

Infrastructure scaling

Computational complexity or something

Higgs Boson detection rate


Front end

HTTP requests

Page size

Percieved responsiveness

Responsibilities


Back end

Business rules

Persistence


Front end

Display rules

Interaction



Toolbox

HTML

uShip Styleguide


Markup, not code


...

SCSS

http://sass-lang.com


Superset of CSS syntax


Adds programming language constructs

Facilitates re-use

Compiles to CSS

Javascript

developer.mozilla.org/en-US/docs/Web/JavaScript


Looks like C, Java, etc...


...but is garbage-collected

...interpreted

...loosely-typed

...prototype-based

...has first-class functions

Surviving Javascript


Be disciplined


Be consistent


Be descriptive


Treat it like a real language


uShip Javascript Guide

jQuery

http://api.jquery.com/


Low-level DOM library


Normalizes DOM API for...

...querying

...events

...AJAX

We don't so much use for...

...animation

...complex interaction

...plugins

Knockout

http://knockoutjs.com/


Manage data & state


Declare behavior for HTML elements

Sync data between UI and Javascript models

Help and resources


frontend@uship.com


uShip Javascript Guide


uShip Styleguide


uShip Front End Info

Front end basics

By Daniel Poindexter

Made with Slides.com

Front end basics

  • 672

More from Daniel Poindexter