SlideShare a Scribd company logo
A Day Building Fast,
Responsive, Extensible
Single Page Applications
Chris Love
@ChrisLove
Love2Dev.com
Who Am I
• Front-End Web Dev MVP
• ASP Insider
• Internet Explorer User Agent
• Author
• Speaker
• Tweaker, Lover of Web, JavaScript, CSS & HTML5
• @ChrisLove
• https://love2dev.com
Slide Deck & Source Code
• Normal Slide Decks – http://slidesha.re/15YTrTT
• Today’s Slides - http://bit.ly/1m66Hu6
• Source Code – http://GitHub.com/docluv/movies
What Does A Modern
Web App Look Like?
What is Changing the
Definition of the Web?
What Does the Developer
Experience Look Like?

Recommended for you

Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms tools

All browsers have developer tools that help developers troubleshoot their applications. But each browser's tools are different and all have strengths and weaknesses. Microsoft Edge is no different.This session will highlight some deeper insights you can gain through the Edge developer tools and some advanced tools available from Microsoft. We will dive into advanced CSS and JavaScript debugging capabilities. We will also review how to chase memory leaks and diagnose common performance rendering issues. Finally we will do a quick review of Vorlon.js, a remote debugging library that enables you to troubleshoot issues on devices you do not have developer tool access.

htmljavascriptcss
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks

These are the slides from my talk "Your WebPerf Sucks" at HK CodeConf 2015 (http://hongkong.codeconf.io) at Science Park in Hong Kong, October 24th. Web Performance is an important aspect of building for the web and this talk highlights different aspects of what is important and what can be done to improve web performance and build faster sites. While mentioning different aspects of possible improvements, the main focus lies on optimising the critical rendering path to get pages on the screen faster and what tools can help to do so.

mobileoptimisationfirst paint
Mobile SEO (English Version)
Mobile SEO (English Version)Mobile SEO (English Version)
Mobile SEO (English Version)

Covers the following contents. Objective of this seminar Backgrounds Issues Google’s Issue Web site Owner’s Issue Mobile SEO Measures

mobile seoseoweb marketing
Defining the Modern Web Application
Its Not This
A Day Building Fast, Responsive, Extensible Single Page Applications
Its Not This
326 Http Requests
23 Style Sheets 80kb
84 Images 587kb
101 External Scripts 806kb
229 Primed Http Requests
76 seconds to fully load
Multiple Unminimized Resources
Speed Index 5949
12+MB of Content
Multiple 404s
Mostly Uncached Content

Recommended for you

Develop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will love

Do you want to leverage HTML, CSS and JavaScripts APIs to deliver rich user experiences that outlive the framework du jour? Do You want to understand good front-end application architecture and performance principles. Then you want to build applications in Vanilla JS. Despite popular belief Vanilla JS is not as difficult to master and implement as you might think. In this tutorial Chris Love will demonstrate how to apply many common web performance optimization, good architecture and tricks to build a fast, native-like application user experience customers desire without dependency on large, fast food frameworks. This tutorial will demonstrate the following concepts: - Applying the 14kb Rule for Instant Loading - Markup Management - Eliminating Excess AJAX Calls - Working With and Around Application Cache - Applying Service Workers and HTTP/2 For Even Better User Experiences - Leveraging common browser APIs & good architecture

html5javascriptweb performance
Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]

Responsive web design has taken our industry by storm and with good reason: it helps us improve our reach with less effort. But incorporating responsive design is not the goal, meeting our user’s needs is. Responsive design is not an end in itself… it’s just the beginning. We need to embrace the heterogenous nature of the web—myriad web-enabled devices with vastly different dimensions, screen sizes, networks, and capabilities in use by countless individuals, each with their own special needs—and craft experiences that will work anywhere at any time. We need to build robust systems that adapt in ways far beyond aesthetics.

cssjavascriptresponsive web design
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations

No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them. This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.

web performancejavascript
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
Matt Cutts
"Also take a step back for a minute and consider the intent of this
change: a faster web is great for everyone, but especially for users.
Lots of websites have demonstrated that speeding up the user
experience results in more usage. So speeding up your website isn’t
just something that can affect your search rankings–it’s a fantastic
idea for your users.“
http://bit.ly/SPPB4k
Time is Money
• Faster Sites Have Higher Conversion Rates
• WalMart - http://bit.ly/S1fHSZ
• Google – http://bit.ly/WajJbB
• Amazon – http://bit.ly/S3UoAj
• ShopZilla - http://bit.ly/RIQMDM
WalMart
Folks at Walmart knew their pages were slow. As a for instance, initial
measurement showed that an item page took about 24 seconds to
load for the slowest 5% of users. Why? The usual culprits: too many
page elements, slow third-party scripts, multiple hosts (25% of page
content is served by partners, affiliates, and Marketplace), and
various best practice no-nos
http://bit.ly/WajJbB

Recommended for you

Page Performance: A No-Holds Barred, Holistic Look
Page Performance: A No-Holds Barred, Holistic LookPage Performance: A No-Holds Barred, Holistic Look
Page Performance: A No-Holds Barred, Holistic Look

Because of mobility and changes in Google’s search algorithms, a lot of emphasis has been placed on page performance. But what exactly does that mean? Is it page load time? Image optimization? Content strategy and keyword performance? It’s all this and more! In this presentation, we’ll take a no-holds barred, holistic look at what page performance is and how to deal with it. (Hint: It’s all about the user experience!)

googleseoweb design
Responsive Design
Responsive DesignResponsive Design
Responsive Design

Responsive web design is an approach to web design that makes web pages render well on a variety of devices and screen sizes. It involves using fluid grids, flexible images, and media queries to automatically adjust for different screen sizes and devices. While the concept has existed since the early days of the web, it has grown in popularity recently due to advances in CSS3 and JavaScript that allow for more flexible and dynamic layouts. Responsive design aims to provide an optimal viewing and interaction experience across a wide range of devices by adapting the layout depending on screen size and orientation.

lrdnugweb design and development
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast

This document discusses strategies for improving website performance. It begins by showing examples of slow loading pages and notes that responsive web design (RWD) does not inherently improve performance—proper implementation is important. Several tips for optimizing performance are provided, such as concatenating files, minifying code, compressing images, using responsive images, optimizing font and image sizes, and inlining critical CSS. The document also covers topics like bandwidth versus latency, measuring performance, and how HTTP/2 may impact current best practices. The overarching message is that performance should be a priority considered throughout the design and development process.

wporwdperformance
Google’s ½ Second
Half a second delay caused a 20% drop in traffic. Half a second delay
killed user satisfaction.
The lesson, Marissa said, is that speed matters. People do not like to
wait. Do not make them.
http://bit.ly/TPPhUp
http://bit.ly/16zFCXL
Performance
• Performance Matters
• It Must Be a 1st Class Feature in Any Application
• Not an Afterthought Right Before Deployment
• 80% of Performance Is In the Client, Not the Server
• Cellular Networks Make Page Load Even Tougher
• 500ms Inherent Delay
• Bandwidth Constraints
Modern Web
Applications MUST Load
Fast and Respond Fast

Recommended for you

Orchestrating web engagement requires momentum in contextual intelligence
Orchestrating web engagement requires momentum in contextual intelligence Orchestrating web engagement requires momentum in contextual intelligence
Orchestrating web engagement requires momentum in contextual intelligence

Orchestrating web engagement requires optimizing content delivery based on user context. Conventional approaches load all content at once, but this is not optimal given factors like device type and user goals. A better approach is context-based orchestration, which regulates what and when content is displayed based on contextual factors about the user. This improves metrics like engagement by prioritizing the most relevant content. Implementing such a system requires cloud-based rules to transform websites into optimized models that make content delivery decisions informed by analytics and user data.

Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement

Responsive Webdesign is much more than squishing containers and setting breakpoints. Performance is often a big problem. How to achieve performance with progressive enhancement, conditional loading and RESS. Original Slideshow: http://maddesigns.de/responsive-enhancement/

rwdresponsive web designress
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić

The document discusses the importance of website performance and provides tips to build responsive websites. It notes that users expect pages to load within 2 seconds and will leave slow sites. The tips include reducing HTTP requests, gzipping and minifying components, optimizing images, delivering JavaScript and CSS efficiently, lazy loading images, and inlining critical CSS. Following these foundations and techniques can significantly improve load times and user experience.

responsive websitehrvoje jurišić
Mobile or Device Fragmentation
Touch
Web APIs
HTML5 CSS3 JavaScript

Recommended for you

The Need For Speed - Rigor's slides from ShopVisible Client Connect 2012
The Need For Speed - Rigor's slides from ShopVisible Client Connect 2012The Need For Speed - Rigor's slides from ShopVisible Client Connect 2012
The Need For Speed - Rigor's slides from ShopVisible Client Connect 2012

The document discusses the importance of web performance for ecommerce. It notes that today's average website consists of 84 files from 12 domains totaling 1 megabyte in size. Users expect pages to load quickly, with 70% abandoning sites that take over 3 seconds to load. Poor performance can hurt sales, ad spend, SEO, brands, and customer satisfaction. The document provides tips to improve performance such as minimizing files, using a content delivery network, caching, and optimizing images and resources. It emphasizes measuring performance to identify bottlenecks and then fixing them.

retailweb design and development
SEO: Now What Does Google Want?!
SEO: Now What Does Google Want?!SEO: Now What Does Google Want?!
SEO: Now What Does Google Want?!

My focus in this presentation is to show what Google is looking for in relation to search engine optimization. I also briefly address ads, social media and how to pick an SEO firm. I am an attorney presenting to attorneys, but anyone should find the concepts useful. This is meant to be a basic level seminar for those who don't know much about SEO.

seoattorney seosearch engine optimization
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web

This document discusses using web standards to create interactive data visualizations for the web. It provides an overview of the JavaScript InfoVis Toolkit, which allows creating multiple graph and tree layouts using web standards and JavaScript. It also discusses upcoming improvements to browser engines and JavaScript that will further improve performance of interactive visualizations. Finally, it introduces WebGL and V8-GL as emerging web standards that bring hardware-accelerated 3D graphics to the web through JavaScript.

visualizationjavascriptinformation visualization
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
Let’s Code
Introduction to Fluid Layouts
•Morph to Fill The ViewPort Space
•Rely on CSS
• Absolute Positioning

Recommended for you

Creating Responsive Website Using Bootstrap
Creating Responsive Website Using BootstrapCreating Responsive Website Using Bootstrap
Creating Responsive Website Using Bootstrap

In this presentation you can learn what is bootstrap,how to install bootstrap,working with bootstrap and creating bootstrap website

bootstrapwebsitehtml5
Esse Quam Videri
Esse Quam VideriEsse Quam Videri
Esse Quam Videri

The document discusses the ethics of search engine optimization and whether SEOs prioritize their clients or searchers. It notes that 64% of SEOs have promoted sites they did not believe were the best answers to queries, and 14% did not consider whether the sites they promoted were high quality. The central thesis is that the return on investment of genuinely being the best response to a query is approaching the return of just appearing to be the best response.

seomozconsearch engine optimization
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere

The document discusses responsive web design techniques for creating websites that work well across all device screens. It covers fluid layouts using relative units like percentages, media queries to apply styles conditionally based on screen width, and image optimization techniques like srcset and sizes attributes to serve the most appropriately sized image for different screens. The goal is to provide an optimal viewing experience for users on any device without needing separate mobile sites.

responsive web designweb developmentcss
A Day Building Fast, Responsive, Extensible Single Page Applications
DOCTYPE
Replace This:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
With This:
<!DOCTYPE html>
<html>
DOCTYPE
"DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use
a different rendering mode that is incompatible with some specifications.
Including the DOCTYPE in a document ensures that the browser makes a best-
effort attempt at following the relevant
specifications." http://www.w3.org/TR/html5/syntax.html#the-doctype
Absolute Positioning
.site-header {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 80px;
}

Recommended for you

Responsive web design
Responsive web designResponsive web design
Responsive web design

An introduction to responsive web design and why it is important. Source code is from my latest book, High Performance Single Page Web Applications (http://amzn.to/1a55L89). Source code is on GitHub, https://github.com/docluv/movies.

html5responsive web designcss3
A night at the spa
A night at the spaA night at the spa
A night at the spa

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.

html5sparesponsive web design
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere

The document discusses responsive web design and strategies for creating websites that adapt to different screen sizes. It recommends taking a mobile-first approach, using fluid layouts and media queries to make content responsive. Key tips include starting small and resizing the browser, using Chrome's device mode to emulate different devices, and the matchMedia API to bind JavaScript to breakpoints. The overall goal is to provide an optimal viewing experience across all devices.

responsive web designhtml5mobile web
Let’s Code
Responsive Web Design
• Introduced by Ethan Marcotte 2010 - bit.ly/178an9e
• Web Design Approach To Create An Optimal Viewing Experience
Across All Browser ViewPorts
• Fluid Layouts
• Media Queries
• Minimal if any JavaScript Required
“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
Responsive Design
“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
Responsive Design

Recommended for you

Developing and deploying a website with html5
Developing and deploying a website with html5Developing and deploying a website with html5
Developing and deploying a website with html5

This document discusses developing and deploying websites with HTML5. It covers creating fluid responsive layouts, single page applications, and JavaScript libraries. It also discusses build and deployment processes using GruntJS to manage source code and optimize web applications.

html5css3javascript
Rise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRise and Fall of the Frontend Developer
Rise and Fall of the Frontend Developer

Un breve viaje por la concepción del Desarrollo de Aplicaciones Web desde el clásico patrón de Aplicaciones Web de Servidor con renderización en servidor e interactividad limitada en cliente a la reciente era de las Single Page Applications con renderización en cliente, foco en la interactividad y desacoplamiento del backend hasta llegar a los actuales patrones híbridos de renderización en cliente y servidor en busca de la mejor performance, la mejor experiencia de usuario y el mejor SEO.

frontendjavascriptnextjs
Web Design Trends: 2018 Edition
Web Design Trends: 2018 EditionWeb Design Trends: 2018 Edition
Web Design Trends: 2018 Edition

The document discusses various topics related to web design trends and technologies. It provides an agenda for learning key elements of good web design, technologies used to build websites like HTML, CSS and JavaScript, highlights current design trends defining modern sites, and suggests developing a toolkit to analyze other sites.

web designhtmlcss
“Any attempt to draw a line around a particular device class has as
much permanence as a literal line in the sand. Pause for a moment
and the line blurs. Look away and it will be gone.
Let’s take the absolute best case scenario. You’re building a web app
for internal users for whom you get to specify what computer is
purchased and used. You can specify the browser, the monitor size,
keyboard, etc.”
Jason Grigsby
bit.ly/KzJH9G
Responsive Design
“How long do you think that hardware will be able to be found? Three
years from now when a computer dies and has to be replaced, what are
the chances that the new monitor will be a touchscreen?
By making a decision to design solely for a “desktop UI”, you are creating
technical debt and limiting the longevity of the app you’re building. You’re
designing to a collective hallucination. You don’t have to have a crystal ball
to see where things are headed.
And once you start accepting the reality that the lines inside form factors
are as blurry as the lines between them, then responsiveness becomes a
necessity.”
Jason Grigsby
bit.ly/KzJH9G
Responsive Design
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications

Recommended for you

Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning

Web Performance tuning presentation given at http://www.chippewavalleycodecamp.com/ Covers basic http flow, measuring performance, common changes to improve performance now, and several tools and techniques you can use now.

performancewebcvcc
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season

Retail TouchPoints' 2014 Holiday Connected Consumer Series session presented by Instart Logic #HolidayCCS

instart logicretail touchpointsmobile shopper
Basics of Backbone.js
Basics of Backbone.jsBasics of Backbone.js
Basics of Backbone.js

This presentation introduces Backbone.js as a JavaScript library that provides structure to client-side code using a model-view-controller (MVC) pattern. It is lightweight at under 4kb, and helps organize code into models, views, routers and collections to manage data and sync it between the HTML, JavaScript logic and database, avoiding spaghetti code that is difficult to maintain. Backbone.js is suitable for building front-end heavy and data-driven apps, from scalable widgets to massive applications.

backbone.jsjs-libraryjavascript
A Day Building Fast, Responsive, Extensible Single Page Applications
Mobile First
• Determine The Most Important Information
• Expand From There
• Start Responsive Design Mobile First
Responsive Layout
Responsive Layout

Recommended for you

Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design

This document provides an introduction to responsive web design. It defines responsive web design as crafting websites to provide an optimal experience across devices with screens. It distinguishes between adaptive and responsive design, with responsive design changing elements on the page based on device detection or browser width. The document outlines some basic and advanced ingredients for responsive design, including flexible grids, conditional images, media queries, touch input, and server-side conditionals. It emphasizes the importance of performance in responsive design and provides tips for optimizing websites for different networks and devices.

monkeytalkadaptive web designresponsive web design
WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016

This document discusses WordPress theme performance. It provides data from testing over 3,800 themes on metrics like speed score, number of resources, file sizes, and response bytes. The median theme in 2016 had a mobile speed score of 53, 432KB in total assets, and response bytes of 125KB for HTML, 101KB for CSS, and 155KB for JavaScript. Recommendations include optimizing assets by consolidating and minifying files, deferring non-essential scripts, and conditionally loading resources. The document emphasizes including performance in designs from the start and selecting themes that meet defined performance budgets.

wordpressthemesperformance
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How

This is the Responsive Web Design presentation given to the CIDD, Chicago Interactive Design & Development Meetup group, (sponsored by the WunderLand Group) on 3-13-14 by Ryan Dodd, Design Director for Siteworx in Chicago.

ryan doddciddsiteworx
Responsive Layout
Media Queries
@media (min-width:600px) {
/* Rules Here */
}
@media (min-width:800px) {
/* Rules Here */
}
Responsive Design Best Practices
•Start Small Screen First
•Forces Most Important Data First
•Easier to Adjust CSS Rules
•Let Data Drive Media Queries First
•Its Ok to Use Some JavaScript
•But Not Required
Let’s Code

Recommended for you

Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications

Todays web front-end applications architecture. All resources shared at the end of presentation. Full sources on: https://lnkd.in/gyQuFKK https://lnkd.in/gZK8Sp3

webpacknodejsreact
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations

Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies.

interactionuserspotsuxalive
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow

Web sites can be fast and responsive once you understand the process web browsers use to load and run web pages. We'll look at using tools like WebPageTest to analyze and optimize web pages.

web developmentweb performance
Touch Your Application
Touch Your Application
• Content Must Be Touchable
• Account for Fat Fingers
• Support APIs
• Mouse
• Touch (Apple)
• Pointer (MSFT & W3C)
Touch Your Application
Touch Your Application
• The Average Human Finger
is 11mm in Diameter
• Fingers Range from 8mm -
19mm
• Baby to Large Man

Recommended for you

Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js

The document discusses trends in application development for mobile and cross-platform use. It notes the rise of consumerization of technology and the need to build apps that can be used on any device. This has led to changes like using HTML and JavaScript instead of platform-specific languages to allow cross-platform support. Frameworks like Backbone.js and libraries like Underscore.js can help manage the complexity of building such apps. The document also discusses considerations for responsive design, client-side architecture including MV* frameworks, and tools to support development.

html5; javascript; windows 8
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices

A brief presentation for the Missouri State Digital Media Developer group on cutting through the hype surrounding mobile development and responsive design.

responsive designmomedia query
Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil Givati

The document discusses improving web performance and optimization. It provides an overview of key performance metrics such as time to first byte, time to first impression, onLoad time and fully loaded time. It also discusses tools for measuring performance like Yahoo! YSlow and Google PageSpeed which provide guidelines and scores on items that impact performance. Overall page speed, number of requests, YSlow and PageSpeed scores are important metrics to consider.

talk@ the junction
Touch Your Application
• Touch Points Need Margin
• Or Separation From
Neighbors
Touch Gestures
• Pan
• Pinch/Zoom
• Swipe
• Tap
• Tap + Hold
• Rotate
Touch-action
• CSS Property to Help Determine How Touch is Handled
• Auto
• None
• Pan-x
• Pan-y
• Can disable Auto-zoom
• Enable Scrolling
Scrolling Content
overflow: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
-ms-scroll-chaining: none;
-ms-scroll-translation: vertical-to-horizontal;

Recommended for you

10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016

Web Sites are to slow and this is costing businesses money. Most performance issues are easy to fix. In this session we review why web performance is important and 10 simple things you can do to make a faster user experience.

Quick Fetch API Introduction
Quick Fetch API IntroductionQuick Fetch API Introduction
Quick Fetch API Introduction

The Fetch API is a modern replacement of the XMLHTTPRequest object. It is based on promises and makes making AJAX/API calls easier to manage and code. This slide deck is a quick introduction to the API.

pwajavascriptweb design and development
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications

Progressive Web Apps (PWAs) are websites that utilize modern web capabilities to deliver native app-like experiences to users. PWAs are built using common web technologies including HTTPS, service workers, and web app manifests. Service workers allow PWAs to work offline by caching app assets and responding to fetch events. When installed on a user's homescreen, PWAs can load quickly and feel like native applications while retaining the benefits of the web such as being discoverable, installable, and updatable.

pwaprogressive web applicationsweb development
DeepTissue
• Abstracts Touch & Mouse APIs
• Abstracts Input Modality Gestures
• http://deeptissuejs.com
A Day Building Fast, Responsive, Extensible Single Page Applications
INPUT TYPE=XXXX
• New Input Types Drive On-Screen
Keyboards
• Drives Native Validation
• Tel, email, url, number, etc
Let’s Code

Recommended for you

Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications

Progressive Web Apps (PWAs) are websites that utilize modern web features to deliver native app-like experiences to users. The minimum requirements for a PWA are that it is served over HTTPS, includes a web app manifest, and registers a service worker. Service workers allow PWAs to work offline by handling fetch events and caching assets. While adding a PWA to a user's home screen can improve engagement, the true battleground is changing user perception of the capabilities of web apps versus native apps.

seoonline marketingwebsite
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets

Website speed is a crucial aspect of on page SEO everyone can control. Your goal is to be interactive in under 3 seconds, even on a basic phone over a 3G connection. However, most web sites have so many requests and large payloads this time limit or budget cannot be achieved. In fact, the average web page takes 22 seconds to load, according to Google's research. But what if I told you there is a way to offload or even avoid loading page assets until they are needed? This can give your website a distinct advantage over your competition because not only will Google like your pages better so will your visitors!

seowebsiteweb design and development
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education

Progressive Web Applications are a new way to think about using the web to provide great user experiences using the best web platform features. The education market has many opportunities to benefit their communities using PWAs to deliver information and application experiences across all devices and platforms.

progressive web applicationsmobilewebsite
The Server-Side Story
• Provide Markup, CSS, JavaScript, Images
• API End Points
• Possible Legacy URL Redirects
• Deal with Search Engine Spiders and Legacy Browsers
The Modern Web Hour Glass
HTML5
JavaScript
CSS3
ASP.NET.IIS
DB – SQL Server/NoSQL
SPAHelper Library
• Extends ASP.NET MVC
• Custom SPAWebViewPage
• SPAModel
• SPAHelper
• http://bit.ly/1dUYLGJ
SPAWebViewPage
• Must Use it as Base for MVC View
• Extends MVC’s WebViewPage
• SPARenderPage
• Causes only Changed Content to be Sent to Client
• Works in Concert with Backpack to Cache Markup in localStorage

Recommended for you

The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...

This document discusses moving to a serverless architecture to build highly scalable applications. It defines serverless as developing applications without having to manage servers. Popular cloud services that enable serverless architectures are mentioned, including AWS Lambda, Amazon S3, API Gateway, and others. Serverless allows developers to focus on their applications instead of infrastructure.

serverlessaws
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching

Over the past year we have seen a lot of excitement around Progressive Web Applications. Browser evangelist are selling developers and business owners on their advantages and promising future. But what is the real story? What are the details to proper execution? What do engineers need to know to make their web sites into Progressive Web Applications that not only meet the minimum criteria, but meet the sales hype? Searching the Pokedex offline is fun, what is the real experience like caching a business application? Caching application assets and data can be complex, especially for larger applications. What to cache, how long to cache and how to cache are all valid questions. Often, in an effort to just ship something, we cache nothing. When we don't cache, we disappoint the customer and miss a key promise of progressive web applications.

html5progressive web applicationsservice worker
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applications

Progressive Web Applications (PWA) is a comprehensive term describing web applications that implement a base set of browser platform features like HTTPS, Web Manifest and Service Workers. But it bleeds beyond the scope of an application's code because browsers are enabling qualified web applications to offer the same user experiences native application enjoy. This includes prominent home screen placement, push notifications, eliminated browser chrome and app store placement. Become a Progressive Web App expert with my course: Progressive Web Apps (PWA) Beginner to Expert -> http://PWACourse.com

businesstechnologyprogressive web applications
SPAWebViewPage
• Must Configure View web.config file:
• <pages pageBaseType="SPAHelper.SPAWebViewPage">
SPAWebViewPage
@if (!Html.HasEscapeFragment())
{
@SPARenderPage("views/home-view.cshtml")
@SPARenderPage("views/movies-view.cshtml")
@SPARenderPage("views/movie-view.cshtml")
…
@SPARenderPage("views/notfound-view.cshtml")
@SPARenderPage("templates/_templates.cshtml")
}
SPAModel
• The SPAModel provides a base for an ASP.NET MVC single page
application model
• The model has properties for the application's Title and Description
• The SetRoute function parses a SPA route to isolate the primary
root
SPAHelper
• The SPAHelper class is a collection of static and static ASP.NET MVC
HTML Helper extension functions
• SPALink
• LastUpdated
• HasEscapeFragment
• HasForceReload

Recommended for you

Implementing a Responsive Image Strategy
Implementing a Responsive Image StrategyImplementing a Responsive Image Strategy
Implementing a Responsive Image Strategy

Applications must implement responsive web design strategies today. However most developers are not experienced in responsive techniques. More over images have provided a difficult hurdle for developers and business stakeholders to make responsive. A proper responsive web design strategy increases return on investment, reduces long term maintenance requirements and improves application performance. Images create many challenges in implementing responsive design. This session will explain what responsive images are. How new web standards have enabled manageable responsive image practices. We will go over tooling and techniques to enable responsive images in your developer and line of business workflows. When you leave this session you will have actionable knowledge of responsive images, techniques, tooling and workflow options you can apply to your projects now.

responsive imagesresponsive web designweb design and development
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips

If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.

responsive web designcssweb development
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft Edge

Microsoft is releasing a new Browser with Windows 10, called Edge. Edge is a fork of Internet Explorer that leaves legacy support behind and adds support for many new specs and features. This session attempts to highlight many of the changes and provide understanding of what the future holds for web developers.

css3internet explorerhtml5
_escape_fragment_
• Google’s Specification for AJAX Applications
• http://bit.ly/117sTgL
• Allows Routes to be Sent to Server Via QueryString
• Server Sends Google Fully Rendered Markup
• Good Core Site Solution
• Legacy Browser Version
• Andy Hume of the Guardian - http://vimeo.com/channels/smashingconf
Cutting The Mustard
• Feature Detect to Determine Browser Capabilities
• Never Browser Sniff
if (!('querySelector' in document) //at least IE8
|| !('localStorage' in window) //at least IE8
|| !('addEventListener' in window) //at least IE8
|| !('matchMedia' in window)) {//at least IE10
} else {
}
Let’s Code
The Client-Side Story
• Things You Used to Do On the Server Now Live In the Client
• Routing
• Rendering
• Data Caching
• Need to be Conscience of How Browsers Work
• Critical Rendering Path
• Memory Management
• Leverage HTML5 Features
• Storage
• Animations

Recommended for you

Touch the web
Touch the webTouch the web
Touch the web

Touch is now everywhere. It is almost impossible to find a personal computing device without a touch screen. This means developers and designers need to reconsider how to design client interfaces to successfully enable successful touch interactions. Touch involves layout choices, new CSS properties and new touch APIs. This session covers design concepts and how to apply new coding techniques

css3javascripttouch
SPAs Are Easy
SPAs Are EasySPAs Are Easy
SPAs Are Easy

This document discusses single page applications (SPAs) and how to build them for high performance. It introduces Chris Love as an ASP.NET MVP and author who has written a book about SPAs. It outlines Love's recommended approach called "The Love2SPA Way" which focuses on extensibility, scalability, and uses libraries like SPAjs and Backpack to build SPAs that are maintainable, testable and deployable. The document concludes by stating this approach can provide tangible returns on investment.

html5sparesponsive web design
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp

This document discusses doing modern web development with JavaScript and HTML5 in the enterprise. It begins by introducing the author and their background. It then discusses resources like podcast interviews and JavaScript libraries the author has created. The document goes on to summarize some key differences between enterprise and non-enterprise development. The main part of the document discusses what a modern web app is, how to structure one for the enterprise, and technologies like HTML5, CSS3, JavaScript, and APIs. It emphasizes the importance of making enterprise JavaScript apps maintainable, scalable, testable, and deployable. It also provides recommendations for managing a JavaScript app project.

javascripthtml5css3
Press # For More
• Routes Are Not Sent to Server
• No Request/Response Iniated
• Must Respond to Route in the Client
• #! Is the Defacto Standard
Press # For More
window.addEventListener("hashchange", function (e) {
//swap the View Here
});
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

Recommended for you

Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation

Manual Method of Product Research | Helium10 | MBS RETRIEVER

product researchhelium10 | mbs retriever
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx

Your comprehensive guide to RPA in healthcare for 2024. Explore the benefits, use cases, and emerging trends of robotic process automation. Understand the challenges and prepare for the future of healthcare automation

rpa in healthcarerpa in healthcare usarpa in healthcare industry
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf

Kief Morris rethinks the infrastructure code delivery lifecycle, advocating for a shift towards composable infrastructure systems. We should shift to designing around deployable components rather than code modules, use more useful levels of abstraction, and drive design and deployment from applications rather than bottom-up, monolithic architecture and delivery.

infrastructure as codeclouddevops
A Day Building Fast, Responsive, Extensible Single Page Applications
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
A Day Building Fast, Responsive, Extensible Single Page Applications

Recommended for you

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference

We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner! We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too! Check out our proposed agenda below 👇👇 08:30 ☕ Welcome coffee (30') 09:00 Opening note/ Intro to UiPath Community (10') Cristina Vidu, Global Manager, Marketing Community @UiPath Dawid Kot, Digital Transformation Lead @Proservartner 09:10 Cloud migration - Proservartner & DOVISTA case study (30') Marcin Drozdowski, Automation CoE Manager @DOVISTA Pawel Kamiński, RPA developer @DOVISTA Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 09:40 From bottlenecks to breakthroughs: Citizen Development in action (25') Pawel Poplawski, Director, Improvement and Automation @McCormick & Company Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company 10:05 Next-level bots: API integration in UiPath Studio (30') Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 10:35 ☕ Coffee Break (15') 10:50 Document Understanding with my RPA Companion (45') Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath 11:35 Power up your Robots: GenAI and GPT in REFramework (45') Krzysztof Karaszewski, Global RPA Product Manager 12:20 🍕 Lunch Break (1hr) 13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30') Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance 13:50 Communications Mining - focus on AI capabilities (30') Thomasz Wierzbicki, Business Analyst @Office Samurai 14:20 Polish MVP panel: Insights on MVP award achievements and career profiling

#uipathcommunity#automation#automationdeveloper
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...

Today’s digitally connected world presents a wide range of security challenges for enterprises. Insider security threats are particularly noteworthy because they have the potential to cause significant harm. Unlike external threats, insider risks originate from within the company, making them more subtle and challenging to identify. This blog aims to provide a comprehensive understanding of insider security threats, including their types, examples, effects, and mitigation techniques.

insider securitycybersecurity threatsenterprise security
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf

Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).

solar storms
The Love2SPA Way
• Extensible
• Scalable
• Maintainable
• Testable
• Deployable
• Have Tangible ROI
SPAjs
• Responsible for Routing
• View Switching
• Executes Animations
• Relies on Animate.css - http://bit.ly/1hayo4s
• Executing View Onload and Unload Functions
Backpack
• Stores View Markup & Templates in localStorage
• 1st Implemented by Google & Bing
• http://bit.ly/117puyn
• Implements an API expected by SPAjs
• MudBath a work in Progress
• Implements Same API
• Used IndexDB
AjaxPrefilter
• Caches Data in localStorage with a TTL
• 1st Implement by Paul Irish
• http://bit.ly/117p7E9
• Can be Used with Any AJAX Implementation
• Eliminates Unnecessary HTTP Requests

Recommended for you

INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf

These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.

air force fighter planebiggest submarinezambia port
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL

Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.

blockchainweb3blockchain technology
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...

Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)

user modelinguser profilinguser model
JavaScript Templating
• Merges JavaScript Objects with Markup
• Many Libraries
• Micro-Templating
• MUSTACHE
• Handlebars
• Generated Markup Appended to DOM
JavaScript Templating
<script id="MoviePosterGridTemplate" type="text/x-mustache-template">
{{#movies}}
<div class="movie-target">
<a href="#!movie/{{id}}/{{title}}">
<img alt="{{title}}" src="{{poster}}" class="movie-grid-poster">
<figcaption class="demo-photo-caption">{{title}}</figcaption>
</a>
</div>
{{/movies}}
</script>
Let’s Code
Create Modular, Extensible JavaScript
Application
• Functions 1st Class in JavaScript
• Functions are Objects
• var foo = {};
• All Objects have a Prototype
• new Keyword creates a new Object
• Many popular Patterns

Recommended for you

Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and slides: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy

Not so much to say

Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world

The presentation showcases the diverse real-world applications of Fused Deposition Modeling (FDM) across multiple industries: 1. **Manufacturing**: FDM is utilized in manufacturing for rapid prototyping, creating custom tools and fixtures, and producing functional end-use parts. Companies leverage its cost-effectiveness and flexibility to streamline production processes. 2. **Medical**: In the medical field, FDM is used to create patient-specific anatomical models, surgical guides, and prosthetics. Its ability to produce precise and biocompatible parts supports advancements in personalized healthcare solutions. 3. **Education**: FDM plays a crucial role in education by enabling students to learn about design and engineering through hands-on 3D printing projects. It promotes innovation and practical skill development in STEM disciplines. 4. **Science**: Researchers use FDM to prototype equipment for scientific experiments, build custom laboratory tools, and create models for visualization and testing purposes. It facilitates rapid iteration and customization in scientific endeavors. 5. **Automotive**: Automotive manufacturers employ FDM for prototyping vehicle components, tooling for assembly lines, and customized parts. It speeds up the design validation process and enhances efficiency in automotive engineering. 6. **Consumer Electronics**: FDM is utilized in consumer electronics for designing and prototyping product enclosures, casings, and internal components. It enables rapid iteration and customization to meet evolving consumer demands. 7. **Robotics**: Robotics engineers leverage FDM to prototype robot parts, create lightweight and durable components, and customize robot designs for specific applications. It supports innovation and optimization in robotic systems. 8. **Aerospace**: In aerospace, FDM is used to manufacture lightweight parts, complex geometries, and prototypes of aircraft components. It contributes to cost reduction, faster production cycles, and weight savings in aerospace engineering. 9. **Architecture**: Architects utilize FDM for creating detailed architectural models, prototypes of building components, and intricate designs. It aids in visualizing concepts, testing structural integrity, and communicating design ideas effectively. Each industry example demonstrates how FDM enhances innovation, accelerates product development, and addresses specific challenges through advanced manufacturing capabilities.

fdmffffused deposition modeling
Extensible
Core
Module
Module
Module
Think Like jQuery
• The jQuery Module Pattern is Familiar
• Not Hard to Implement
• Allows for Extensibility
A SPA Application Module
App
View
View
View
Let’s Code

Recommended for you

Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides

If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights. During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to: - Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value - Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems - Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors - Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported - Look Ahead: Gain insights into where FME is headed with coordinate systems in the future Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!

Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection

Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.

cybersecurityanomaly detectionadvanced techniques
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

Profile portofolio

Building Web Applications
• Just Like C# Applications
• Release
• Debug
• The Web Needs a Compiler
• 2 Great Options
• Grunt
• Gulp
Building Web Applications
• Grunt & Gulp Are Node Modules
• http://gruntjs.com
• http://gulpjs.com
• Both have great eco-systems
• Add To package.json
• Run npm install
• Create gruntfile.js
• Grunt.cmd
Let’s Code
Going Offline
• Leverage the AppCache
• Create a Manifest File
• Don’t Let it be a Handicap
• http://bit.ly/117q27A
• Makes Sure Your App Will Work Without Connectivity
• Good for Caching Images and Resources
• Makes the Browser look Local Before Going to the Server

Recommended for you

Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...

Have you noticed the OpenSSF Scorecard badges on the official Dart and Flutter repos? It's Google's way of showing that they care about security. Practices such as pinning dependencies, branch protection, required reviews, continuous integration tests etc. are measured to provide a score and accompanying badge. You can do the same for your projects, and this presentation will show you how, with an emphasis on the unique challenges that come up when working with Dart and Flutter. The session will provide a walkthrough of the steps involved in securing a first repository, and then what it takes to repeat that process across an organization with multiple repos. It will also look at the ongoing maintenance involved once scorecards have been implemented, and how aspects of that maintenance can be better automated to minimize toil.

dartflutteropenssf
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024

This is a powerpoint that features Microsoft Teams Devices and everything that is new including updates to its software and devices for May 2024

microsoft teamsmicrosoft
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf

In the modern digital era, social media platforms have become integral to our daily lives. These platforms, including Facebook, Instagram, WhatsApp, and Snapchat, offer countless ways to connect, share, and communicate.

social media hackerfacebook hackerhire a instagram hacker
Developing with AppCache is a PITA
@{if (HttpContext.Current.IsDebuggingEnabled)
{
@:<html lang="en">
}
else
{
@:<html lang="en" manifest="app.cache">
}
}
Manifest File
• CACHE
• lists all resources that should be downloaded for offline use
• NETWORK
• identifies any URLs that require the device be connected to the network
• FALLBACK
• lists replacement URLs for network URLs to be used when the device is
offline
How AppCache Works
• When the browser reads the manifest file it downloads the
specified resources locally
• Those resources are referred too instead of making a
request to the server
• Resources are refreshed if the manifest file has been
updated
Let’s Code

Recommended for you

Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation

Java Servlet programs

The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing

Invited Remote Lecture to SC21 The International Conference for High Performance Computing, Networking, Storage, and Analysis St. Louis, Missouri November 18, 2021

distributed supercomputerdistributed machine learning
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
Questions

More Related Content

What's hot

BD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginningBD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginning
Peter McLachlan
 
Single page applications the basics
Single page applications the basicsSingle page applications the basics
Single page applications the basics
Chris Love
 
10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today
Chris Love
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms tools
Chris Love
 
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks
Holger Bartel
 
Mobile SEO (English Version)
Mobile SEO (English Version)Mobile SEO (English Version)
Mobile SEO (English Version)
ssuserd60633
 
Develop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will love
Chris Love
 
Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]
Aaron Gustafson
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
Chris Love
 
Page Performance: A No-Holds Barred, Holistic Look
Page Performance: A No-Holds Barred, Holistic LookPage Performance: A No-Holds Barred, Holistic Look
Page Performance: A No-Holds Barred, Holistic Look
Jeff Whitfield
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
David Hudson
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
Sven Wolfermann
 
Orchestrating web engagement requires momentum in contextual intelligence
Orchestrating web engagement requires momentum in contextual intelligence Orchestrating web engagement requires momentum in contextual intelligence
Orchestrating web engagement requires momentum in contextual intelligence
Padma Sambhav Pati
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
Sven Wolfermann
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
MeetMagentoNY2014
 
The Need For Speed - Rigor's slides from ShopVisible Client Connect 2012
The Need For Speed - Rigor's slides from ShopVisible Client Connect 2012The Need For Speed - Rigor's slides from ShopVisible Client Connect 2012
The Need For Speed - Rigor's slides from ShopVisible Client Connect 2012
Rigor
 
SEO: Now What Does Google Want?!
SEO: Now What Does Google Want?!SEO: Now What Does Google Want?!
SEO: Now What Does Google Want?!
Jennifer Ellis, JD, LLC
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
philogb
 
Creating Responsive Website Using Bootstrap
Creating Responsive Website Using BootstrapCreating Responsive Website Using Bootstrap
Creating Responsive Website Using Bootstrap
gavaskar s
 
Esse Quam Videri
Esse Quam VideriEsse Quam Videri
Esse Quam Videri
Russell Jones
 

What's hot (20)

BD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginningBD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginning
 
Single page applications the basics
Single page applications the basicsSingle page applications the basics
Single page applications the basics
 
10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms tools
 
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks
 
Mobile SEO (English Version)
Mobile SEO (English Version)Mobile SEO (English Version)
Mobile SEO (English Version)
 
Develop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will love
 
Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
Page Performance: A No-Holds Barred, Holistic Look
Page Performance: A No-Holds Barred, Holistic LookPage Performance: A No-Holds Barred, Holistic Look
Page Performance: A No-Holds Barred, Holistic Look
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
 
Orchestrating web engagement requires momentum in contextual intelligence
Orchestrating web engagement requires momentum in contextual intelligence Orchestrating web engagement requires momentum in contextual intelligence
Orchestrating web engagement requires momentum in contextual intelligence
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
 
The Need For Speed - Rigor's slides from ShopVisible Client Connect 2012
The Need For Speed - Rigor's slides from ShopVisible Client Connect 2012The Need For Speed - Rigor's slides from ShopVisible Client Connect 2012
The Need For Speed - Rigor's slides from ShopVisible Client Connect 2012
 
SEO: Now What Does Google Want?!
SEO: Now What Does Google Want?!SEO: Now What Does Google Want?!
SEO: Now What Does Google Want?!
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 
Creating Responsive Website Using Bootstrap
Creating Responsive Website Using BootstrapCreating Responsive Website Using Bootstrap
Creating Responsive Website Using Bootstrap
 
Esse Quam Videri
Esse Quam VideriEsse Quam Videri
Esse Quam Videri
 

Similar to A Day Building Fast, Responsive, Extensible Single Page Applications

Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
Chris Love
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Chris Love
 
A night at the spa
A night at the spaA night at the spa
A night at the spa
Chris Love
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
Chris Love
 
Developing and deploying a website with html5
Developing and deploying a website with html5Developing and deploying a website with html5
Developing and deploying a website with html5
Chris Love
 
Rise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRise and Fall of the Frontend Developer
Rise and Fall of the Frontend Developer
Rafael Casuso Romate
 
Web Design Trends: 2018 Edition
Web Design Trends: 2018 EditionWeb Design Trends: 2018 Edition
Web Design Trends: 2018 Edition
St. Petersburg College
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
John McCaffrey
 
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
G3 Communications
 
Basics of Backbone.js
Basics of Backbone.jsBasics of Backbone.js
Basics of Backbone.js
Avishekh Bharati
 
Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design
Serge Hufkens
 
WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016
jancbeck
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How
Judi Wunderlich
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
Ömer Göktuğ Poyraz
 
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
dmethvin
 
Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
Microsoft Developer Network (MSDN) - Belgium and Luxembourg
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
mintersam
 
Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Mika Josting
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016
Chris Love
 

Similar to A Day Building Fast, Responsive, Extensible Single Page Applications (20)

Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
A night at the spa
A night at the spaA night at the spa
A night at the spa
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
Developing and deploying a website with html5
Developing and deploying a website with html5Developing and deploying a website with html5
Developing and deploying a website with html5
 
Rise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRise and Fall of the Frontend Developer
Rise and Fall of the Frontend Developer
 
Web Design Trends: 2018 Edition
Web Design Trends: 2018 EditionWeb Design Trends: 2018 Edition
Web Design Trends: 2018 Edition
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
 
Basics of Backbone.js
Basics of Backbone.jsBasics of Backbone.js
Basics of Backbone.js
 
Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design
 
WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
 
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
 
Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016
 

More from Chris Love

Quick Fetch API Introduction
Quick Fetch API IntroductionQuick Fetch API Introduction
Quick Fetch API Introduction
Chris Love
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
Chris Love
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
Chris Love
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
Chris Love
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education
Chris Love
 
The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...
Chris Love
 
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
Chris Love
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applications
Chris Love
 
Implementing a Responsive Image Strategy
Implementing a Responsive Image StrategyImplementing a Responsive Image Strategy
Implementing a Responsive Image Strategy
Chris Love
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
Chris Love
 
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft Edge
Chris Love
 
Touch the web
Touch the webTouch the web
Touch the web
Chris Love
 
SPAs Are Easy
SPAs Are EasySPAs Are Easy
SPAs Are Easy
Chris Love
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Chris Love
 

More from Chris Love (14)

Quick Fetch API Introduction
Quick Fetch API IntroductionQuick Fetch API Introduction
Quick Fetch API Introduction
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education
 
The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...
 
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applications
 
Implementing a Responsive Image Strategy
Implementing a Responsive Image StrategyImplementing a Responsive Image Strategy
Implementing a Responsive Image Strategy
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft Edge
 
Touch the web
Touch the webTouch the web
Touch the web
 
SPAs Are Easy
SPAs Are EasySPAs Are Easy
SPAs Are Easy
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 

Recently uploaded

Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 

Recently uploaded (20)

Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 

A Day Building Fast, Responsive, Extensible Single Page Applications

  • 1. A Day Building Fast, Responsive, Extensible Single Page Applications Chris Love @ChrisLove Love2Dev.com
  • 2. Who Am I • Front-End Web Dev MVP • ASP Insider • Internet Explorer User Agent • Author • Speaker • Tweaker, Lover of Web, JavaScript, CSS & HTML5 • @ChrisLove • https://love2dev.com
  • 3. Slide Deck & Source Code • Normal Slide Decks – http://slidesha.re/15YTrTT • Today’s Slides - http://bit.ly/1m66Hu6 • Source Code – http://GitHub.com/docluv/movies
  • 4. What Does A Modern Web App Look Like? What is Changing the Definition of the Web? What Does the Developer Experience Look Like?
  • 5. Defining the Modern Web Application
  • 8. Its Not This 326 Http Requests 23 Style Sheets 80kb 84 Images 587kb 101 External Scripts 806kb 229 Primed Http Requests 76 seconds to fully load Multiple Unminimized Resources Speed Index 5949 12+MB of Content Multiple 404s Mostly Uncached Content
  • 9. 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
  • 10. Matt Cutts "Also take a step back for a minute and consider the intent of this change: a faster web is great for everyone, but especially for users. Lots of websites have demonstrated that speeding up the user experience results in more usage. So speeding up your website isn’t just something that can affect your search rankings–it’s a fantastic idea for your users.“ http://bit.ly/SPPB4k
  • 11. Time is Money • Faster Sites Have Higher Conversion Rates • WalMart - http://bit.ly/S1fHSZ • Google – http://bit.ly/WajJbB • Amazon – http://bit.ly/S3UoAj • ShopZilla - http://bit.ly/RIQMDM
  • 12. WalMart Folks at Walmart knew their pages were slow. As a for instance, initial measurement showed that an item page took about 24 seconds to load for the slowest 5% of users. Why? The usual culprits: too many page elements, slow third-party scripts, multiple hosts (25% of page content is served by partners, affiliates, and Marketplace), and various best practice no-nos http://bit.ly/WajJbB
  • 13. Google’s ½ Second Half a second delay caused a 20% drop in traffic. Half a second delay killed user satisfaction. The lesson, Marissa said, is that speed matters. People do not like to wait. Do not make them. http://bit.ly/TPPhUp
  • 15. Performance • Performance Matters • It Must Be a 1st Class Feature in Any Application • Not an Afterthought Right Before Deployment • 80% of Performance Is In the Client, Not the Server • Cellular Networks Make Page Load Even Tougher • 500ms Inherent Delay • Bandwidth Constraints
  • 16. Modern Web Applications MUST Load Fast and Respond Fast
  • 17. Mobile or Device Fragmentation
  • 18. Touch
  • 21. The Modern Web Hour Glass HTML5 JavaScript CSS3 ASP.NET.IIS DB – SQL Server/NoSQL
  • 22. (API + HTML5 + CSS3 + JavaScript + Standards Compliant Browser) * (Touch + Mobility + Performance) === Great Single Page Application
  • 24. Introduction to Fluid Layouts •Morph to Fill The ViewPort Space •Rely on CSS • Absolute Positioning
  • 26. DOCTYPE Replace This: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> With This: <!DOCTYPE html> <html>
  • 27. DOCTYPE "DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best- effort attempt at following the relevant specifications." http://www.w3.org/TR/html5/syntax.html#the-doctype
  • 28. Absolute Positioning .site-header { position: absolute; top: 0; right: 0; left: 0; height: 80px; }
  • 30. Responsive Web Design • Introduced by Ethan Marcotte 2010 - bit.ly/178an9e • Web Design Approach To Create An Optimal Viewing Experience Across All Browser ViewPorts • Fluid Layouts • Media Queries • Minimal if any JavaScript Required
  • 31. “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 Responsive Design
  • 32. “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 Responsive Design
  • 33. “Any attempt to draw a line around a particular device class has as much permanence as a literal line in the sand. Pause for a moment and the line blurs. Look away and it will be gone. Let’s take the absolute best case scenario. You’re building a web app for internal users for whom you get to specify what computer is purchased and used. You can specify the browser, the monitor size, keyboard, etc.” Jason Grigsby bit.ly/KzJH9G Responsive Design
  • 34. “How long do you think that hardware will be able to be found? Three years from now when a computer dies and has to be replaced, what are the chances that the new monitor will be a touchscreen? By making a decision to design solely for a “desktop UI”, you are creating technical debt and limiting the longevity of the app you’re building. You’re designing to a collective hallucination. You don’t have to have a crystal ball to see where things are headed. And once you start accepting the reality that the lines inside form factors are as blurry as the lines between them, then responsiveness becomes a necessity.” Jason Grigsby bit.ly/KzJH9G Responsive Design
  • 38. Mobile First • Determine The Most Important Information • Expand From There • Start Responsive Design Mobile First
  • 42. Media Queries @media (min-width:600px) { /* Rules Here */ } @media (min-width:800px) { /* Rules Here */ }
  • 43. Responsive Design Best Practices •Start Small Screen First •Forces Most Important Data First •Easier to Adjust CSS Rules •Let Data Drive Media Queries First •Its Ok to Use Some JavaScript •But Not Required
  • 46. Touch Your Application • Content Must Be Touchable • Account for Fat Fingers • Support APIs • Mouse • Touch (Apple) • Pointer (MSFT & W3C)
  • 48. Touch Your Application • The Average Human Finger is 11mm in Diameter • Fingers Range from 8mm - 19mm • Baby to Large Man
  • 49. Touch Your Application • Touch Points Need Margin • Or Separation From Neighbors
  • 50. Touch Gestures • Pan • Pinch/Zoom • Swipe • Tap • Tap + Hold • Rotate
  • 51. Touch-action • CSS Property to Help Determine How Touch is Handled • Auto • None • Pan-x • Pan-y • Can disable Auto-zoom • Enable Scrolling
  • 52. Scrolling Content overflow: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; -ms-scroll-chaining: none; -ms-scroll-translation: vertical-to-horizontal;
  • 53. DeepTissue • Abstracts Touch & Mouse APIs • Abstracts Input Modality Gestures • http://deeptissuejs.com
  • 55. INPUT TYPE=XXXX • New Input Types Drive On-Screen Keyboards • Drives Native Validation • Tel, email, url, number, etc
  • 57. The Server-Side Story • Provide Markup, CSS, JavaScript, Images • API End Points • Possible Legacy URL Redirects • Deal with Search Engine Spiders and Legacy Browsers
  • 58. The Modern Web Hour Glass HTML5 JavaScript CSS3 ASP.NET.IIS DB – SQL Server/NoSQL
  • 59. SPAHelper Library • Extends ASP.NET MVC • Custom SPAWebViewPage • SPAModel • SPAHelper • http://bit.ly/1dUYLGJ
  • 60. SPAWebViewPage • Must Use it as Base for MVC View • Extends MVC’s WebViewPage • SPARenderPage • Causes only Changed Content to be Sent to Client • Works in Concert with Backpack to Cache Markup in localStorage
  • 61. SPAWebViewPage • Must Configure View web.config file: • <pages pageBaseType="SPAHelper.SPAWebViewPage">
  • 63. SPAModel • The SPAModel provides a base for an ASP.NET MVC single page application model • The model has properties for the application's Title and Description • The SetRoute function parses a SPA route to isolate the primary root
  • 64. SPAHelper • The SPAHelper class is a collection of static and static ASP.NET MVC HTML Helper extension functions • SPALink • LastUpdated • HasEscapeFragment • HasForceReload
  • 65. _escape_fragment_ • Google’s Specification for AJAX Applications • http://bit.ly/117sTgL • Allows Routes to be Sent to Server Via QueryString • Server Sends Google Fully Rendered Markup • Good Core Site Solution • Legacy Browser Version • Andy Hume of the Guardian - http://vimeo.com/channels/smashingconf
  • 66. Cutting The Mustard • Feature Detect to Determine Browser Capabilities • Never Browser Sniff if (!('querySelector' in document) //at least IE8 || !('localStorage' in window) //at least IE8 || !('addEventListener' in window) //at least IE8 || !('matchMedia' in window)) {//at least IE10 } else { }
  • 68. The Client-Side Story • Things You Used to Do On the Server Now Live In the Client • Routing • Rendering • Data Caching • Need to be Conscience of How Browsers Work • Critical Rendering Path • Memory Management • Leverage HTML5 Features • Storage • Animations
  • 69. Press # For More • Routes Are Not Sent to Server • No Request/Response Iniated • Must Respond to Route in the Client • #! Is the Defacto Standard
  • 70. Press # For More window.addEventListener("hashchange", function (e) { //swap the View Here });
  • 71. What About These Guys? •Angular •Ember •Backbone •Durandal
  • 72. Common Problems •Too Large •Try to be everything to everybody •Memory Leaks •Many Brittle Practices •Routing •Virtualize Native Functionality
  • 74. 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
  • 75. 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
  • 77. The Love2SPA Way • Extensible • Scalable • Maintainable • Testable • Deployable • Have Tangible ROI
  • 78. SPAjs • Responsible for Routing • View Switching • Executes Animations • Relies on Animate.css - http://bit.ly/1hayo4s • Executing View Onload and Unload Functions
  • 79. Backpack • Stores View Markup & Templates in localStorage • 1st Implemented by Google & Bing • http://bit.ly/117puyn • Implements an API expected by SPAjs • MudBath a work in Progress • Implements Same API • Used IndexDB
  • 80. AjaxPrefilter • Caches Data in localStorage with a TTL • 1st Implement by Paul Irish • http://bit.ly/117p7E9 • Can be Used with Any AJAX Implementation • Eliminates Unnecessary HTTP Requests
  • 81. JavaScript Templating • Merges JavaScript Objects with Markup • Many Libraries • Micro-Templating • MUSTACHE • Handlebars • Generated Markup Appended to DOM
  • 82. JavaScript Templating <script id="MoviePosterGridTemplate" type="text/x-mustache-template"> {{#movies}} <div class="movie-target"> <a href="#!movie/{{id}}/{{title}}"> <img alt="{{title}}" src="{{poster}}" class="movie-grid-poster"> <figcaption class="demo-photo-caption">{{title}}</figcaption> </a> </div> {{/movies}} </script>
  • 84. Create Modular, Extensible JavaScript Application • Functions 1st Class in JavaScript • Functions are Objects • var foo = {}; • All Objects have a Prototype • new Keyword creates a new Object • Many popular Patterns
  • 86. Think Like jQuery • The jQuery Module Pattern is Familiar • Not Hard to Implement • Allows for Extensibility
  • 87. A SPA Application Module App View View View
  • 89. Building Web Applications • Just Like C# Applications • Release • Debug • The Web Needs a Compiler • 2 Great Options • Grunt • Gulp
  • 90. Building Web Applications • Grunt & Gulp Are Node Modules • http://gruntjs.com • http://gulpjs.com • Both have great eco-systems • Add To package.json • Run npm install • Create gruntfile.js • Grunt.cmd
  • 92. Going Offline • Leverage the AppCache • Create a Manifest File • Don’t Let it be a Handicap • http://bit.ly/117q27A • Makes Sure Your App Will Work Without Connectivity • Good for Caching Images and Resources • Makes the Browser look Local Before Going to the Server
  • 93. Developing with AppCache is a PITA @{if (HttpContext.Current.IsDebuggingEnabled) { @:<html lang="en"> } else { @:<html lang="en" manifest="app.cache"> } }
  • 94. Manifest File • CACHE • lists all resources that should be downloaded for offline use • NETWORK • identifies any URLs that require the device be connected to the network • FALLBACK • lists replacement URLs for network URLs to be used when the device is offline
  • 95. How AppCache Works • When the browser reads the manifest file it downloads the specified resources locally • Those resources are referred too instead of making a request to the server • Resources are refreshed if the manifest file has been updated
  • 97. 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