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

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

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

SCSS Example

$route-start-degrees: 69deg;
$route-end-degrees: 69deg;

.trackAndManage-originPoint {

    left: (1 + cos($route-start-degrees)) * 50%;

    bottom: (1 + sin($route-start-degrees)) * 50%;

}

.trackAndManage-destinationPoint {

    left: (1 + cos($route-end-degrees)) * 50%;

    bottom: (1 + sin($route-end-degrees)) * 50%;

}

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

Knockout

http://knockoutjs.com/

Manage data & state

Declare behavior for HTML elements

Sync data between UI and Javascript models

And Then...

Our Badass Build System

        

           

SCSS
        
        

            

        
               ES6 JS
          
    

        

           

CSS
        
        

            


JS
                    

                 


    

Help and resources

frontend@uship.com

uShip Javascript Guide

uShip Styleguide

uShip Front End Info