Mobile Web


Introduction to mobile web applications using modern technologies


@wearefractal


@eschoff - @funkytek - @wearefractal

Consulting, training, products, professional services

contact@wearefractal.com

Open source is at github.com/wearefractal





The web has been around for a while...

A Brief History


  • 1991 - HTML
  • 1994 - HTML 2
  • 1996 - CSS and Javascript
  • 1997 - HTML 4
  • 1998 - CSS 2
  • 2000 - XHTML
  • 2002 - Tableless Design





It just wasn't very good.

Why Now?


  • 2005 - AJAX
  • 2009 - "HTML5"

AJAX


  • You no longer have to load an entire page to get content
  • Web pages can access APIs directly


"HTML5"

Not a whole lot of HTML...

  • Offline storage access
  • Real-time communications (WebSockets, WebRTC)
  • Filesystem access
  • Direct peripheral access
  • Direct graphics access (WebGL + Canvas)
  • CSS3
    • Hardware accelerated animations
    • Hardware accelerated scrolling
    • Media queries for responsive design
    • See this for more
  • ES6

Applications



We can rebuild them. We have the technology.


Web applications are "write once, run everywhere"

"SPA" - Single Page App


  1. Server gives the browser initial resources (JS, CSS, HTML)
  2. Browser caches these resources for offline access
  3. Browser renders the app using these resources
  4. All further interaction takes place solely within the application
  5. Any external data IO is done using APIs

Why "SPA"?


  • Bad mobile networks
  • Highly scalable since the server does nothing
  • Totally offline usage
  • Page refreshes make things feel slow
  • User interaction is instant giving a native feel to it

Frameworks

  • Backbone and friends (Marionette, Dermis, etc.)
  • Angular
  • Derby
  • React


and a bunch more...

See this site for a list and a Todo app written in each

Your Stack


Every developer in this ecosystem has a set of tools they prefer.

This is known as your stack.

Before starting application you need to take some time to find the tools that not only feel most natural to you.

Golden Rule™


There are already 100 modules that do anything you will ever need. Pick the one with the most github stars.

My Client Stack


  • CoffeeScript (compiles to Javascript)
  • Jade templates (compiles to HTML)
  • Stylus (compiles to CSS)
  • Dermis (home grown variant of Backbone)
    • Uses rivets.js for data binding
    • Uses page.js for routing
  • Bootstrap for desktop view
  • Ratchet for mobile view
  • Grunt for build-system and live reload

My Server Stack


  • NodeJS
  • Express (serves static files)

Code Overview



Let's dive in.
Made with Slides.com