• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A night at the spa
 

A night at the spa

on

  • 471 views

This is the slide deck to introduce important topics to developer to build great, high performance Single Page Web Applications. The slide deck is used to setup a review of the code and architecture ...

This is the slide deck to introduce important topics to developer to build great, high performance Single Page Web Applications. The slide deck is used to setup a review of the code and architecture in my demonstration movie web application used in my latest book. The site is live at http://movies.spawebbook.com and the source code is available on GitHub https://github.com/docluv/movies.
Single page application are a new frontier to the web development world. They require a completely different mindset than classic, server-side heavy web development. Not only do developers need to understand modular JavaScript and the DOM API they also need to understand good responsive design practices, performance optimization, touch and a mobile first approach.

Statistics

Views

Total Views
471
Views on SlideShare
464
Embed Views
7

Actions

Likes
1
Downloads
7
Comments
0

1 Embed 7

https://twitter.com 7

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    A night at the spa A night at the spa Presentation Transcript

    • A Night @ The SPA Chris Love @ChrisLove Love2Dev.com
    • Who Am I • ASP.NET MVP • ASP Insider • Internet Explorer User Agent • Author • Speaker • Tweaker, Lover of Web, JavaScript, CSS & HTML5 • @ChrisLove • Love2Dev.com
    • High Performance Single Page Web Applications • Responsive Design • Touch • Mobile First • SPA • Extensible, Scalable Architecture • Web Build and Workflow • Goes Really Fast! • ~395 Pages • 20 Chapters • $9.99 http://amzn.to/1a55L89
    • Slide Deck & Source Code • Slide Deck – slidesha.re/15YTrTT • Source Code – http://GitHub.com/docluv
    • What Does A Modern Web App Look Like? What is Changing the Definition of the Web?
    • Performance • Multiple Studies Show Correlation Between Conversions & Speed • 57% Will Abandon a Slow Site After 3 Seconds • We Have to Concentrate 50% Harder For Slow Sites • 78% Have Felt Stress or Anger With Slow Sites • 44% Say Slow Sites Make Them Anxious • 4% Have Thrown Their Phone
    • Mobile or Device Fragmentation
    • Touch
    • Web APIs
    • HTML5 CSS3 JavaScript
    • The Modern Web Hour Glass HTML5 JavaScript CSS3 ASP.NET.IIS DB – SQL Server/NoSQL
    • (API + HTML5 + CSS3 + JavaScript + Standards Compliant Browser) * (Touch + Mobility + Performance) === Great Single Page Application
    • How Do We Get There?
    • What About These Guys? •Angular •Ember •Backbone •Durandal
    • Common Problems •Too Large •Try to be everything to everybody •Memory Leaks •Many Brittle Practices •Routing •Virtualize Native Functionality
    • The Love2SPA Way • SPAjs • Backpack/Mud Bath * • DollarBill** • Caching AJAX Layer • HTML Template Engine • Deeptissue • Toolbar, Panorama, Other Small UI Libraries * Under Development ** jQuery Compatible
    • The Love2SPA Way – Typical Stats • 35-80kb minified, not gzipped JavaScript • 20-35kb minified, not gzipped CSS • 5-35kb minified, not gzipped HTML • 3 Core Http Requests • < 1 second Load Time
    • The Love2SPA Way • Extensible • Scalable • Maintainable • Testable • Deployable • Have Tangible ROI
    • Extensible Core Module Module Module
    • Scalable • Should Work As More Users Enter • Should Work Throughout Day • Should Work Across All Devices • Should Keep Working On Errors
    • Maintainable • Small Components • Interchangeable Components • Single Responsibilities • Single Code Base (Responsive Design)
    • Testable • Should be Easy to Write & Execute Unit Test on Application Specific Code • Test Should be Automated as Part of Build Process
    • Deployable • Should Have a Developer Version • Small View & Component Related Files & Modules • Should Have a Production Version • Bundled & Minified CSS & JavaScript • Optimized Images • CDN Deployed Static Resources
    • Tangible ROI • Improved Business Experience • Higher Productivity • Lower Error Rates • Lower Development Costs • Application Will Last Longer as Technology Changes
    • Why Responsive Design Is Important “this unspoken agreement to pretend that we had a certain size. And that size changed over the years. For a while, we all sort of tacitly agreed that 640 by 480 was the right size, and then later than changed to 800:600, and 1024; we seem to have settled on this 960 pixel as being this like, default. It’s still unknown. We still don’t know the size of the browser; it’s just like this consensual hallucination that we’ve all agreed to participate in: “Let’s assume the browser has a browser width of at least 960 pixels.” Jeremy Keith bit.ly/1bhH6rw
    • Why Responsive Design Is Important “The emergence of ideas like “responsive design” and “future-friendly thinking” are in part a response to the collective realization that designing products that solve one problem in one context at a time is no longer sustainable. By refocusing our process on systems that are explicitly designed to adapt to a changing environment, we have an opportunity to develop durable, long-lasting designs that renew their usefulness and value over time.” Wilson Miner bit.ly/1fbq5lB
    • Why Responsive Design Is Important “With such a wide range of possibilities, the sensible thing to do is to zero in on the harshest conditions (or toughest things to deliver) and build from there. Like cars designed to perform in extreme heat or on icy roads, websites should be built to face the reality of the web’s inherent variability.” Trent Walton http://trentwalton.com/2014/03/10/device-agnostic/
    • Mobile First • The Current Harshest Condition • Determine The Most Important Information • Expand From There • Start Responsive Design Mobile First
    • Architecting Web Applications • A Core App • Add Functionality As Needed App View View View
    • JavaScript Objects • Do Not Use the Global Namespace • Use a Module • JavaScript Object – {} • Make it Extensible • Think Like jQuery
    • Organize Files • Break JavaScript, CSS and Markup into Targeted Files • Bundle & Minify With a Task Runner like Grunt or Gulp
    • The Server’s Role • Serve Needed Content & Resources • Provide a Data API • Use JSON • Deal with Search Engines & Obsolete Browsers • _escape_fragment_ • https://developers.google.com/webmasters/ajax- crawling/docs/specification • SPAHelper Library • Extends ASP.NET MVC
    • The Client’s Role • Does the Browser Cut the Mustard? • Simple Feature Detection • Do I Use the SPA or Classic Web? • Use Declarative Syntax For Routing & View Configuration • Cache Content in localStorage or IndexDB • Transition Views • #! • CSS Animations
    • The Client’s Role • Dynamically Build Markup • Templating Engine • Handlebars • Mustache • Micro-Template • Append and Remove Markup on Demand
    • Questions
    • Let’s Code
    • High Performance Single Page Web Applications • Responsive Design • Touch • Mobile First • SPA • Extensible, Scalable Architecture • Web Build and Workflow • Goes Really Fast! • ~395 Pages • 20 Chapters • $9.99 http://amzn.to/1a55L89