Single Page Applications (SPA) are quite the rave today, and rightly so! Bringing the “cool factor” to your website has never been easier. Picture your web application working like a desktop applications, with beautiful, seamless transitions from page to page without the appearance of the entire screen re-loading!
With SPAs, there is no need to pause the application and reload the entire screen because it works quietly in the background. It also eliminates the need to re-write HTML that has not changed, making the browser page look like a cool desktop application. SPA’s helps in many area’s including response time, user experience, and server resources. With SPAs it is easy to modularize portions of a view (portion of the screen) for specific purposes. For example, I can have on one page, a list of persons, and a section for details for each person. The list and the details are independent views in my ‘master view’ that I can control programmatically to display and do it’s work separately from one another, without causing the entire page to reload. If you would like to see a few really nice SPA examples I have provided a link to some real-world examples of our work at the bottom of this article.
So…if you’re a business owner, or the person in charge of your company’s web sites and applications, SPA’s are cool!
Here’s the technical overview of how to create and use Single Page Applications (warning, geeky discussion ahead!).
Let’s get the basics out of the way. If you need to persist user data between browser sessions you will need some form of database application and programming interface. There are many out there, but since we are a Microsoft-house, SQLExpress is free and always good to learn. If you are going to have users, and manage authentication and authorization, then you will likely need an application server to manage user requests. I like to use Microsoft Visual Studio and C# to work with the ASP.NET MVC framework as my development platform at Palm Beach Software Design, Inc.
A SPA simply needs to fetch data and load it to the view without ever needing to completely refresh the view. We do not require a database or a server side web application framework if the data is available elsewhere such as arrays or list items. We can create a SPA using only HTML and one or more javascript libraries.
There are quite a few javascript libraries that aid in development of SPA’s. But one seems to be the most popular amongst developers: Angular. Angular is a framework maintained by Google to assist in developing SPA’s. Angular does much more than just help develop SPA’s but that is what I think it is best used for. Angular does a great job in doing so and enforces good coding practices. I will go into detail of those in a future article.
I recently have implemented Angular in a project used to get survey information from clients. In the project I had to implement Directives, Data Binding, Dependency Injection, Expressions, Modules, Scopes, and Form Validation. Over my next few blogs I am going to cover each of these and detail and perhaps make a small project towards the end. Once I was able to understand Angular’s concepts, development was really nice and “made sense”. Additionally, Angular has amazing documentation features. Below you will also find a link to Angulars Dev Guide.
https://docs.angularjs.org/guide/introduction
At Palm Beach Software Design, we strive to use the latest technologies to bring our clients the competitive advantage. Their web applications look and perform like world-class software should. I’d love to hear about your next project, and maybe even get involved! Tell us what your next project is all about, and how you think Single Page technology can give your company that “little bit extra” in such a competitive and fluid environment.
Zachary Jones is a Software Engineer at Palm Beach Software Design, Inc. For more information, check out http://www.PalmBeachSoftware.com or give us a call at 561-572-0233.
