Learn the Secrets Behind Modern Single Page Web Application Development

Let no one proclaim HTML5 is not ready! My latest book, High Performance Single Page Web Applications ($9.99 US on Amazon) guides you through around the problems of the modern single page web application. The concepts and example application are sure to be a disruptor of the status quo. A new philosophy of designing web applications that feel like their native siblings, but perform better and target every platform and device size.

Headlines routinely proclaim HTML5 as not ready to compete with native counterparts. Nothing could be farther from the truth. The problem lies in the way web applications are architected. The headlines identify the wrong problem, classic web architecture, not HTML5 and modern web standards. Modern web applications cannot compete using yesterday's standards. Modern web applications must be fast, responsive, touch enabled and incorporate responsive design techniques. Unfortunately the predominate developer attitudes it force class web development concepts to the modern, mobile first world.

Emerging web design trends require a new development mindset as well. Instead of the traditional horizontal, news paper inspired, layouts today's web experiences are very data driven and interactive. This is where Flat UI shines.

Creating the modern user experience requires a different standard, an outside-in approach. Traditional web development is an inside-out model, putting the developer's needs ahead of the end user. This means code design patterns and library dependencies are prioritized above the user experience. User First Development comprises a mobile, touch and performance first approach to web development. It is an easy philosophy to implement, leading to responsive, easy to interact with and maintain modern single page web applications.

High Performance Single Page Web Applications puts these principles to practice examining a movie web application. Flat or Metro UI design principles are used to create a rich, touchable interface. The application uses scrollable lists, animated page transitions, HTML5 inputs and responsive navigation to give the application a native-like experience.

A modular, maintainable and extensible JavaScript architecture is used in combination with browser storage to drive the application. Several new JavaScript libraries are also formally introduced, SPAjs and backpack most notably. Deeptissue, toolbarjs, panoramajs and DollarBill (a micro library similar to jQuery) as well as MUSTACHE and reqwest are also used to build a microjs centric application foundation. Microjs is the use of small, targeted JavaScript libraries instead of one or more large 'kitchen sink' libraries like Angular or jQuery.

The book covers code organization strategy and how to 'build' the web application using Grunt. These are important topics because many new front-end engineers are re-purposed back-end developers, floundering in the front-end world. They need project organization and tooling guidance to be more confident and productive in their new roles.

The application is built using ASP.NET MVC on the server. The Rotten Tomatoes API provides live movie data via AJAX. There is no 'traditional' server-side markup rendering implemented. The SPAHelper library is used to extend ASP.NET MVC to make it more SPA friendly.

The application's source code is available on GitHub. A live version of the movie application is available at http://movies.spawebbook.com. I encourage you to try it out on your devices and let me know what you think about the responsiveness. The book is currently available on Amazon for $9.99 US & Canada. The price point does vary slightly in other countries, but is roughly equivalent to $10 US. The book is comprised of approximately 395 pages and 20 chapters. Buy the book, examine the code and the corresponding text describing the problems and solutions behind all the design decisions. Please leave a review on Amazon or a comment on my blog to let me know what you think. If you are interested in having me speak to your developer user group or conference ping me on Twitter (@ChrisLove).

Thanks for your support, the code and book are a product of over 4 years of a mobile, performance and JavaScript first development approach. I have made many mistakes along the way and been fortunate enough to have the time and resources to try something different than the mainstream. I think it is the right path to making the next generation web applications and developers succeed.

Share This Article With Your Friends!

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel