Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Frontend

  • Architecture, Building and Workflow

Table of Contents

  • Levels of frontend development
  • How to get there
    1. Architecture
    2. Build Processes
    3. Testing
    4. Communication with backend
    5. Development Workflow
    6. Performance

Table of contents

  • Levels of frontend development
  • How to get there
    1. Architecture
    2. Build Processes
    3. Testing
    4. Communication with backend
    5. Development Workflow
    6. Performance

Point categories

  • Usability
  • Performance
  • Visual
  • Dynamicism
  • Developer experience
  • Debugging
  • Refactoring

Participant Award - Request and response

  • No dynamicism
  • User experience depends on load times
  • Serving full web page from server
  • Usually built backend first
    • J2EE, Controller & JSP
    • PHP
    • Etc.

Bronze - Request & Response + Javascript

  • Serving full HTML from backend
  • Using JavaScript to enhance user experience
    • Datepickers
    • Form validations
  • Probably the most common in old-ish codebases
  • Patterns from ~2005 onwards (Jquery, Dojo, ExtJS)
  • Probably the biggest reason why developers hate JavaScript
    • Spaghetti code
    • Event handler callback hell
    • Global State
    • Impossible to manage

Silver - Client side built website

  • IIFEs and Module pattern
  • Maybe some testing, maybe not
  • Still usually handling DOM updates (with JQuery or similar)
  • View layer on HTML, "Model" and "Controller" in JS
  • Seen in the wild from about late nougths onwards
  • Data fetching handled either:
    1. Serving initial HTML from backend + Dynamic data with AJAX
    2. Fetching all data with AJAX, appending dynamic templates

Gold - Frontend application

  • Modules (AMD, CommonJS, Angular modules)
  • Using modern frontend framework Backbone, Knockout, Angular, Ember, React
  • Build process
  • Testable components
  • Minified output
  • Client side routing
  • Usually SPA
  • Most data fetching via AJAX
  • Bundled in house code, libraries from CDN

Platinum - Modern frontend application

  • Modules (AMD, CommonJS, Angular modules)
  • Using modern framework Backbone, Angular, Ember, React
  • Build process, Transpilation, linting etc.
  • Testable components, Served from a centralized location (CDN)
  • Minified output - Individual files for each larger section (URL pattern)
  • Both Server and Client side routing
  • Usually SPA Progressively enhanced application
    • Multiple server rendered pages, data served during initial page load and with AJAX
    • Asynchronously loaded scripts

DIAMOND!!!

Isomorphic Javascript application

  • Everything from Platinum + more
  • Server rendered and client rendered
  • Using same codebase on both sides
  • Seamless transition between server rendered pages and dynamic client application

Where are we?

  • Levels of frontend development
  • How to get there - Towards Platinum
    1. Architecture
    2. Build Processes
    3. Testing
    4. Communication with backend
    5. Development Workflow
    6. Performance

Architecture - Project structure

  • Modules, modules, modules
    • Node.JS modules the easiest to use
    • Angular has it's own module system, also "ok"
  • Libraries and external resources served from one place (CDN)
  • In-house built resources served from one place
  • Script tags on HTML, naturally CSS on top, JS on the bottom
  • Clear separation between HTML & JS
  • Separation between CSS, HTML & JS?
    • Not necessarily :o
  • Folder structure depends on used framework

Architecture - Dependency/vendor/library mgmt

  • No need to reinvent the wheel, use community modules
  • Frontend modules are also tiny, like Node.JS
  • NPM as a repository for frontend dependencies
  • If possible pre-built in-house libraries served from CDN
  • node_modules in gitignore
    • node_modules is usually huge, no need to put it into version control
  • This at the latest introduces a build process to the process

Architecture - State handling

  • A frontend application model is usually separate from backend
    • A full application on frontend only
  • Own model layer
  • Own state handling
    • Think about synchronization points between backend and frontend
    • Eventual consistency is enough
  • Use backend as a persistent data store
  • Model may be page specific or application wide
  • Utilize the browser: localstorage, cookies

Architecture - SPA or just a bath

SPA approach

  • Building a web app to modern customers --> Go SPA, it's enough
  • SPA frees you from single client syndrome
    • Different clients for mobiles, web etc.

Hybrid approach

  • Server rendered "section" of the site
    • URL patterns are a good way to separate these
  • Client side routing for subviews in section
  • Client side templating for subviews

Cartography break

  • Levels of frontend development
  • How to get there - Towards Platinum
    1. Architecture
    2. Build Processes
    3. Testing
    4. Communication with backend
    5. Development Workflow
    6. Performance

Build Processes - Why should we care?

  • Performance
    • Minification
  • Security
    • Uglification
  • New and Improved JavaScript
    • Transpilation
  • Quality
    • Linting, Static Analysis, Extendability, Refactorability
  • Developer happiness
    • Autoreloading, hot reloading, debugging, time travelling
  • And of course testing

Build processes - How?

  • Install Node.JS
  • Create a build tool file
    • Gulp
    • Webpack
  • Run
  • Enjoy

Not really

  • Install Node.js
  • Copy-Paste build config from the internets
  • Modify it to fit your need
  • Get frustrated
  • Change build tool
  • Repeat previous steps
  • ???
  • Profit

Worth it?

Definitely

  • Luckily this has already been done
  • Write once, modify very seldomly

Back on map

  • Levels of frontend development
  • How to get there - Towards Platinum
    1. Architecture
    2. Build Processes
    3. Testing
    4. Communication with backend
    5. Development Workflow
    6. Performance

Testing - Why?

Testing - How?

  • Unit tests - first line of defence
    • Modules makes it possible
  • Testing models
    • Are returning correct types
  • Action/Controller/Event testing
    • Do triggered events launch correct action
    • Does controller update model correctly
    • Mocking backend communication
  • Testing DOM changes
    • Has a class been added?
    • Did this text field change?
    • But you need a DOM for that :(

Tracking

  • Levels of frontend development
  • How to get there - Towards Platinum
    1. Architecture
    2. Build Processes
    3. Testing
    4. Communication with backend
    5. Development Workflow
    6. Performance

Communication with backend

APIs everywhere

  1. Returning embedded data with server request
    • Essential data
  2. Making AJAX calls to enhance view
    • Most data
  3. Using local storage for persistent or semi-persistent data
    • Special cases

Development Workflow

  • Magical Node.JS
  • Linting
    • ESlint
  • Tooling
    • IntelliJ/Webstorm #1
    • Visual Studio Code
    • Sublime Text? Atom?
  • Debugging
    • Chrome Dev Tools / Firefox Dev Tools / Node Inspector
    • Dev builds vs. Prod builds
  • Hot reloading, time travelling, auto refreshing
    • Webpack <3
    • Redux <3

One more thing

  • Levels of frontend development
  • How to get there - Towards Platinum
    1. Architecture
    2. Build Processes
    3. Testing
    4. Communication with backend
    5. Development Workflow
    6. Performance

Performance

  • Caching
  • GZIP
  • CDNs and library sharing
  • Bundle sizes
  • Perceived load time
  • Time to first paint
  • Time to functionality

Use a spacebar or arrow keys to navigate