- What are single page applications?
- Who are the players?
- Great examples of single page applications
- How corporations can benefit from SPAs?
- What are the risks involved?
- How can I get started?
I’m sending this post with love to anyone who’s interested in reading about single page applications. There is, however, one special audience who is close to my heart.
Dear busy corporate managers, I know how it feels when you don’t have the time to play with leading edge tech. Your hobby project lies untouched on your table at home, while you’re working your ass off at the office. I dedicate this post to you.
I chose to write about single page applications, because I love the way they change how we use and think of web sites and web apps. I believe that SPAs will soon become a topic in the corporate segment, because they enable the same user experience across channels and devices.
In addition they are cost-effective tools when creating web apps, mobile apps and desktop applications by reusing the same code components.
What are single page applications?
The key highlight of SPAs is that your users get a fluid, application-like experience on the web. This is achieved by the fact that SPAs don’t need to download every page one-by-one as users traverse through the app.
The only thing that is requested from your backend during sessions is pure business data, in the form of JSON, XML or some other lean representation.
Logically you can have various pages in your app or website, but technically these are provided by the code that was downloaded initially.
SPAs behave like desktop applications we used to use in a client-server environment. All the presentation logic is part of the app and is readily available when you start the application. Data is requested from the server as required.
Who are the players?
There are two leading providers of SPA technology. Google and Facebook.
Google developed angular.js, which is a web framework to create single page applications.
Facebook created react.js to be used in interactive features like FB chat. Facebook’s Instagram is entirely built with React.
Both projects are open sourced on GitHub with an active community using and extending the packages. There is a plethora of extensions and complementary packages available on GitHub for both technologies.
Official documentation is adequate in both cases, however there is a significant difference between the two.
Angular is a framework, it inherently contains the key features required to set up a well-rounded web application.
React is different. Being a package, you need to make your own choices from available packages when putting together your entire app.
This has an impact on the React learning curve, because React is less opinionated, there are several solutions for routing, state management etc., there is no one single best approach to do things.
Angular being one framework has some inherent preferences and a 5 minute getting started guide. This statement is true for Angular2, which currently is in beta, still evolving.
Well, both options are super leading edge.
Personally I like React sites better than Angular, and moved from Angular 1 to React mainly because of better state management and paid the price of the steep learning curve.
Great examples of single page applications
Both Google and Facebook use these technologies in their in-house solutions.
Google trends, for instance, is an angular web app. Instagram is the best reference for React in-house, while Khan Academy is one of my favorite implementations of react.js. Khan Academy have become one of the key contributors to the React project, by the way.
Please note how pages are not loaded in their entirety after the initial load. After you get into a course on Khan Academy for example, all lessons become blazing fast, no page load, no HTML download, just pure content data. It really feels like sitting in the class room.
How corporations can benefit from SPAs?
Exceptional customer service across channels and devices
Improving customer service experience is continuously a top priority of corporations. Customer expectations moved to the realms of intuitive, zero touch self-service experiences across various channels and devices.
A good example is Gap Inc.(built with Angular), where you can connect your shopping bag across devices.
Such experiences greatly improve customer loyalty and engagement. SPAs have an extra, soft plus being fluid and responsive, giving way to personalization and intuition.
Besides the above mentioned cool factor, there are hard facts supporting the customer experience case.
When designing such experiences project teams usually reach a point when they make compromises for different devices and platforms. This results in different features on different platforms. Your customers will not have the same services on a mobile phone and on your website, which is often annoying.
The reasons behind these compromises vary. They could be the high cost of implementation for many platforms, privacy/security issues, legacy limitations, inadequate mobile design tools, etc.
Clearing the limits between channels and devices is still to come.
Save on mobile, web and desktop while providing the same experience
Angular and React are created for more than the web only. One great advantage of these tools is that you can re-use your code components to build your mobile, web and desktop applications.
This means that you need to implement your business logic only once. You’ll have to apply some extra steps, though, but you’ll be saving big time on the implementation costs.
This way you’ll have the same services across channels and devices based on the same code components.
These tools were purposefully designed to support web, mobile and desktop development. Angular uses Ionic and NativeScript to build hybrid and native applications. React provides React Native for native mobile app creation.
Both Angular and React will let you create apps for iOS and Android.
Rediscover desktop applications
Cross platform desktop applications start to gain traction again. They are used to bring customer experiences into the personal space.
One big area of such apps is messaging and productivity. They are built to fulfill the needs of collaboration and communications across global teams in a digital world.
Another great user group of cross-platform desktop apps is the creative community. Designers and developers use such apps every day. A great example is Google’s powerful prototyping platform: Pixate.
You can use your Angular and React components to build Electron applications. Electron is available for OS X, Windows and Linux (Ubuntu, Fedora, Debian).
What are the risks involved?
It’s the well-known mantra of ‘ilities’.
While usability, extensibility and portability are great, other points need some extra planning.
Scalability of these tools should be examined in a broader context. Google trends or Instagram prove that you can scale any corporate service with these tools. The question is how to scale your legacy systems to serve data to another large group of users.
Security and privacy has been on the agenda for years now. The ways of the web changed the requirements for corporate security. The appearance of single page applications just increased this pressure.
I belive the previous two points are known to corporate managers. The big question with Angular and React adoption in my opinion is maintainability.
I’m doing my best to keep my environment stable, still I’m using packages with React that publish new releases every other day on GitHub. Following up with changes is a continuous effort and requires attention.
The trick is probably the open-source nature of Angular and React. They are not created for users to be used as-is. They are co-created with users. This may be a big step for traditional corporations. Instead of expecting a mature product, you assign people to extend a great open source product to suit your needs … and you open-source the stuff you added.
How can I get started?
You’ll need a few things to get started with single page applications using the above tools.
Most of us need more information than what is available in the official docs. A good tip is to clone one of the many boilerplate repos from GitHub.
There are great tutorials out there on Udemy, like the The Complete Guide to Angular 2 with 93 lectures and 10.5 hours of video material. A similar, best-in-class course for React would be Modern React with Redux, which uses the ever so popular Redux to manage application state and events.
Single page applications provide a new, high-speed, intuitive user experience in web applications and web-sites. It is a clear trend, that sites built with this technology are getting more and more attention from users and developers.
Their popularity lies in their application feel, personalized services, fluid transactions and intuitive features.
They not only attract customers, they have the power to remedy burning issues of corporations. They are ideal to create superior customer service experiences, they are designed to re-use the same code components for various channels and devices, thus saving implementation and maintenance cost.
The risks involved are related to the cutting edge-nature of these products. Despite the risks, several big names, like Airbnb, Netflix, Salesforce, MSNBC, Deezer, Atlassian, Gap Inc., The New York Times, IMDb and many others think that SPAs are worth the investment.