Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Development Trends - What's New in the World of Web Development

21,478 views

Published on

This is the deck from a keynote speech I gave at an internal Intel conference discussing some of the key trends in the world of Web development.

Published in: Technology
  • Be the first to comment

Development Trends - What's New in the World of Web Development

  1. 1. © Copyright The Wahlin Group: All rights reserved. Web Development Trends What’s New in the World of Web Development? Dan Wahlin
  2. 2. Contact Info Blog http://weblogs.asp.net/dwahlin Twitter @DanWahlin
  3. 3. Agenda • Mobile First and Responsive Web Design • Data-Oriented vs. Control-Oriented Development • Single Page Applications
  4. 4. The Mobile Revolution How often is your mobile device more than a few feet away from you?
  5. 5. What is Mobile First? A strategy that factors in mobile devices as a primary development target.
  6. 6. Mobile Browsers Source: http://gs.statcounter.com
  7. 7. Mobile Device Page Views Source: http://www.smartinsights.com Device share of website traffic
  8. 8. A Typical Mobile Day Source: http://www.smartinsights.com
  9. 9. What is Responsive Web Design? A development and design technique that provides an optimal viewing experience across multiple devices.
  10. 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. 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. 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. 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. 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. 15. Responsive CSS Frameworks http://cardinalcss.comhttp://purecss.io http://getbootstrap.com http://foundation.zurb.com
  16. 16. Responsive JavaScript Libraries http://www.sencha.comhttp://joapp.com/ http://jquerymobile.com http://zeptojs.com
  17. 17. Agenda • Mobile First and Responsive Web Design • Data-Oriented vs. Control-Oriented Development • Single Page Applications
  18. 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. 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. 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. 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. 22. Data Binding Libraries http://kmalakoff.github.io/knockbackhttp://angularjs.org http://knockoutjs.com http://jsviews.com
  23. 23. Agenda • Mobile First and Responsive Web Design • Data-Oriented vs. Control-Oriented Development • Single Page Applications
  24. 24. Single Page Application (SPA) SPA Demo http://www.myspa.com View View View View
  25. 25. The Challenge with SPAs DOM Manipulation History Routing Module Loading Data Binding Object Modeling Ajax/Promises Caching View Loading
  26. 26. SPA Frameworks http://backbonejs.orghttp://emberjs.com http://angularjs.org http://durandaljs.com
  27. 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. 28. View Controller *FactoryDirectives Routes Module Config $scope AngularJS - The Big Picture
  29. 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. 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. 31. Code Demos • http://goo.gl/fa4Bdc • https://github.com/DanWahlin/CustomerManagerStandard
  32. 32. Structuring JavaScript Code Book http://goo.gl/dnvcSN
  33. 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. 34. Contact Info Blog http://weblogs.asp.net/dwahlin Twitter @DanWahlin

×