Development Trends - What's New in the World of Web Development
23 likes22,135 views
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.
![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](https://image.slidesharecdn.com/developmenttrendswhatsnewintheworldofwebdevelopment-131010145631-phpapp01/85/Development-Trends-What-s-New-in-the-World-of-Web-Development-29-320.jpg)
Ad
More Related Content
Viewers also liked (10)
Similar to Development Trends - What's New in the World of Web Development (20)
Ad
Recently uploaded (20)
Ad
Development Trends - What's New in the World of Web Development
- 1. © Copyright The Wahlin Group: All rights reserved. Web Development Trends What’s New in the World of Web Development? Dan Wahlin
- 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.
- 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
- 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
Editor's Notes
- #8: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/This is based on data for popular eCommerce sites
- #9: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
- #16: Others:Skeleton: http://www.getskeleton.com/Inuit.css: http://inuitcss.com/