Meta Refresh 2014

On the construction of user interface on the web

Om Shankar

@omshiv

Oh, I want a SPA | Building efficient, performant & awesome Single Page Applications

Submitted Oct 24, 2013

Gabbar: Kitne page the Samba?

Samba: Ek Sardar, sirf Ek !!

Single Page Applications are representing the web today, giving meaning to the phrase “Web as Application”. Not just startups who build dashboards for their products, even Web companies like Amazon and Adobe have a suit of single page apps used internally.

In this talk I will be focusing on design principles and architecture of SPAs while starting from Scratch, technologies involved, structure, tooling & testing, workflow, etc.

I will also try to show that core JavaScript developers are pretty much efficient in implementing better designs. An intelligent Frontend developer is at least an average natural UI Designer too

Outline

So as to let the choice of tool stand on developer, following topics will be more workflow/process oriented.
They represent the things to be done while creating a SPA, without focusing on which library or piece of code to use for the same:

  1. Shifting to Client side - What’s a SPA? UI as just another Client
  2. Step 1 - Building a Shell
  3. Step 2 - Building features (Modules, Fractal MVC, Anchor Interface)
  4. Step 3 - Clientside modeling and Data, going Offline, and then Wiring up with Server
  5. Step 4 - SEO and Authentication
  6. CSS (OOCSS & BEM), HTML & JavaScript Design considerations
  7. UX (Experience) Considerations. Responsiveness, Elements, Animations and Feedback.

Important Useful Links:

  • The Demo App - Built on Backbone.js, that allows you to drag drop images from Desktop, apply filters, create albums, write stuff, etc. - all from a Single Page. This app is a work in progress, to be completed before conference
  • Slideshow Link coming soon...
  • More links if any, will be added soon ...

Requirements

  • A device with a beautiful screen where you can see a sample Single Page Application I will be demo-ing. (13", 1280 x 720; lesser specs = you miss out)

Speaker bio

I am a JavaScript and Front-end fanatic; but have been forced to work on RoR, Python, PHP and Java backends, at companies like Adobe, WalmartLabs and Amazon
I have managed to take a good stand on Frontend again by delivering awesome single page products consumable in the browser.

I love writing algorithms and artificial code level intelligence, and I like designs and aesthetics too, the latter I feel shy to admit.

However, a good design encompasses all, it’s how “it performs”, as said by hon. Steve Jobs. Hopefully, I will try to bring feel of it in the talk.

Slides

http://bit.ly/webrtc-prez

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more