This document discusses several trends in web development, including mobile-first and responsive design, data-oriented development, and single page applications. It defines key concepts like responsive design using CSS media queries and flexible layouts, data binding, and single page application frameworks like AngularJS. The document provides examples and references to learn more.

1. © Copyright The Wahlin Group: All rights reserved.
Web Development Trends
What’s New in the World of Web
Development?
Dan Wahlin

2. Contact Info
Blog
http://weblogs.asp.net/dwahlin
Twitter
@DanWahlin

3. Agenda
• Mobile First and Responsive Web Design
• Data-Oriented vs. Control-Oriented
Development
• Single Page Applications

4. The Mobile Revolution
How often is your mobile device
more than a few feet away from
you?

5. What is Mobile First?
A strategy that factors in mobile
devices as a primary development
target.

6. Mobile Browsers
Source: http://gs.statcounter.com

7. Mobile Device Page Views
Source: http://www.smartinsights.com
Device share of
website traffic

8. A Typical Mobile Day
Source: http://www.smartinsights.com

9. What is Responsive Web Design?
A development and design technique that
provides an optimal viewing experience
across multiple devices.

10. Responsive Design and CSS Media
Queries
• CSS Media queries allow different styles to be
applied for:
– Printing
– Screen sizes
– Device orientations
– Display resolutions
@media screen and (max-width : 320px)
@media screen and (resolution: 96dpi)
@media (min-width: 700px) and (orientation: landscape)
@media print

11. Targeting Screens with Media
Queries
• CSS Media queries can be used to target
different screen sizes
@media screen and (max-width:320px)
{
nav ul
{
height: 100%;
}
nav ul > li {
float: none;
}
}

12. <picture>
<source media="(min-width: 45em)" src="large.jpg">
<source media="(min-width: 18em)" src="med.jpg">
<source src="small.jpg">
<img src="small.jpg" alt="">
<p>Accessible text</p>
</picture>
Responsive Images
• New ways to define responsive images are
being discussed:
http://responsiveimages.org/

13. Responsive Images Polyfill
• The PictureFill polyfill script can be used to
emulate responsive images today:
<span data-picture data-alt="A giant stone face">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg"
data-media="(min-width: 400px)"></span>
<span data-src="large.jpg"
data-media="(min-width: 800px)"></span>
<span data-src="xlarge.jpg"
data-media="(min-width: 1000px)"></span>
</span>
https://github.com/scottjehl/picturefill

14. Responsive Layouts
• CSS3 Flexbox
– http://www.w3.org/TR/css3-flexbox
• CSS3 Multiple-Column Layout
– http://www.w3.org/TR/css3-multicol
• CSS3 Grid Layout
– http://dev.w3.org/csswg/css-grid

15. Responsive CSS Frameworks
http://cardinalcss.comhttp://purecss.io
http://getbootstrap.com http://foundation.zurb.com

16. Responsive JavaScript Libraries
http://www.sencha.comhttp://joapp.com/
http://jquerymobile.com http://zeptojs.com

17. Agenda
• Mobile First and Responsive Web Design
• Data-Oriented vs. Control-Oriented
Development
• Single Page Applications

18. Data Binding
• JavaScript doesn't provide native support for
data binding
• Two-way data binding can lead to significant
reductions in code
John DoeName: Name Property
Changes updated
in control
Changes updated
in property

19. Control-Oriented Development
Workflow
John DoeName:
1. Code assigns value to a textbox
document.getElementById('name').value = 'John Doe';
2. User modifies data
3. User clicks a button
4. Code pulls the value out of the textbox
var name = document.getElementById('name').value;
Submit

20. Data-Oriented Development
Workflow
John DoeName:
1. Property is bound to a textbox
<input type="text" data-bind="value: name"/>
2. User modifies data
3. User clicks a button
4. Property value is automatically updated!
Submit

21. Data-Oriented Development Example
Name: <input type="text" data-bind="value: name"/>
<br />
<span data-bind="text: name"></span>
<br />
<button data-bind="click:changeName">Change Name</button>
...
var viewModel = {
name: ko.observable("Rex"),
changeName: function () { this.name = "Ted"; }
};
ko.applyBindings(viewModel);
HTML5 data-*
attribute

22. Data Binding Libraries
http://kmalakoff.github.io/knockbackhttp://angularjs.org
http://knockoutjs.com http://jsviews.com

23. Agenda
• Mobile First and Responsive Web Design
• Data-Oriented vs. Control-Oriented
Development
• Single Page Applications

24. Single Page Application (SPA)
SPA Demo
http://www.myspa.com
View View
View View

25. The Challenge with SPAs
DOM Manipulation History
Routing
Module Loading
Data Binding
Object Modeling
Ajax/Promises
Caching
View Loading

26. SPA Frameworks
http://backbonejs.orghttp://emberjs.com
http://angularjs.org http://durandaljs.com

27. ngularJS is a full-featured
SPA framework
Data Binding MVC Routing
Templates
ViewModel Views
Controllers Dependency Injection
Directives
Testing
Controllers
jqLite
Validation
FactoriesHistory

28. View Controller
*FactoryDirectives
Routes
Module
Config
$scope
AngularJS - The Big Picture

29. var demoApp = angular.module('demoApp', []);
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Dave Jones', city: 'Phoenix' },
{ name: 'Jamie Riley', city: 'Atlanta' },
{ name: 'Heedy Wahlin', city: 'Chandler' },
{ name: 'Thomas Winter', city: 'Seattle' }
];
});
Define a Module
Define a
Controller
A Quick Look at a Controller

30. Summary
• There are a lot of new technologies trending in
the Web world (in addition to HTML5):
– Mobile first development
– Responsive Design
– Flexible layouts such as Flexbox
– Client-side Data Binding
– Single Page Applications
– Much more…

31. Code Demos
• http://goo.gl/fa4Bdc
• https://github.com/DanWahlin/CustomerManagerStandard

32. Structuring JavaScript Code Book
http://goo.gl/dnvcSN

33. Onsite Training
• Interested in onsite training for your team? We
provide training on the following topics (plus
more):
– Node.js
– JavaScript (language, patterns, technologies, more)
– jQuery
– AngularJS and SPAs
– C# (language, patterns, advanced concepts, more)
– ASP.NET MVC
– Web API
– Windows 8 Programming

34. Contact Info
Blog
http://weblogs.asp.net/dwahlin
Twitter
@DanWahlin