SPAs vs. MPAs
A single-page application (SPA) is a website that re-renders its content in response to navigation actions (e.g. clicking a link) without making a request to the server to fetch new HTML. On the other hand, a Multi Page Application (MPA) is a traditional website where the client clicks on a link to navigate and the server renders and return a new page.
There is a big debate between these two options although SPAs are more popular since they provide a better user experience. You can find technical comparisons here and here. However, frameworks such next.js are changing the landscape making development easier and faster, adding client side features; and in general providing the same SPA experience while rendering the HTML on the server.
- Rich user experience. Easy to do responsive design.
- Better performance
- Lots of frameworks like React and Angular.
- The development is simplified and streamlined. Easy to debug.
- Easier to use browser features. SPA can cache any local storage effectively.
- SPAs Framework are built for Mobile.
- Great for Serverless and FaaS.
- Great for APIs and GraphQL.
- Slow first load while downloading all the scripts.
- Poor SEO performance.
- Harder to secure and may have more issues running on old browsers.
When I should use SPAs
- You want to create great user experiences that perform well and use the latest features.
- You want to decouple front end and back end development.
- You want to build also hybrid mobile applications.
- Your businesses is not dependent on marketing and you don’t care about SEO performance.
- You are using API Management solutions and you want to serve data from the server, not HTML.
- You want to use Serverless Frameworks.
- You want to deploy to the cloud and integrate with other services such Identity management, caching, etc.
When I shouldn’t use SPAs
- You care about SEO performance.
- Your skills set are based on server side technologies like Spring, Struts, etc.
- You need to support old browser and security is a top priority. You want to deploy the app in your own servers.
Personally, I think SPAs are a better option for most use cases. Google Bot can now parse SPAs and tools like Pre Render help to solve the SEO performance issue. However, I do like next.js, it solves most of the issues with MPAs making it easier to develop and maintain. Check this great video for more details.
React vs Angular vs Vue
Check this article for all the details. The main difference is that Angular is framework and React a library. Angular uses TypeScript, it may be a disadvantage for some but if you come from the Java world, getting used to Angular will not be a problem.
When I should use Angular
- Your app is small or medium in complexity and has simple state machine.
- You want the same app for web and mobile.
- You already have a hybrid app using Ionic or NativeScript.
- Your priority is web, then Android, then iOS.
- You have limited budget.
When I should use React
- You have a complex web site that needs to load fast and perform well.
- You have a lot of dependencies, lots of components, very dynamic web site with a complex state.
- You want high performance and two separate code bases for mobile and web but a hybrid approach on mobile with great performance.
- You want a future proof solution with great support.
Progressive Web Applications (PWAs)
I really like PWAs. I wrote a post dedicated to it. I cannot see any reason why you should've start incorporating native features such as home screen link, notifications or offline access to your web app.
PWAs examples in production
- Twitter Lite (mobile.twitter.com) was built as a Progressive Web App.
- Uber: m.uber.com.
- Starbucks: https://app.starbucks.com/
- Alibaba: the biggest Chinese retailer.
When to use PWAs
- You want a single code base.
- Your app is not graphic intensive and performance is not an issue.
- You just need basic native features such camera or geo location.
- You want to rely on open standards. You want to avoid updating your libraries every 2 months.
- You don’t mind using the latest native features such as finger print or NFC.
- Your main focus is desktop users and mobile is secondary.
- Your main customer target group are Android mobile users.
- You don’t have much budget.
- You don’t need customers accessing your website every day.
- In general, if you are not sure if you really need a mobile app, you can start by gradually converting your site into a PWA and see if this is enough for your business needs.
When you shouldn’t use PWAs
- Games or graphic intensive apps
- Complex apps with lots of data and complicated state machine. Use React Native or Flutter for this.
- You develop Mobile Apps only and you don’t need a web site.
- You need heavy engagement, tracking and iteration with your customers. Push notifications and full background sync is a must.
- Your business model requires customer access really frequently (daily).
- You want to build amazing user experiences and UI design is key for your business success.
- You need access to the latest native features like fingerprint, read phone state, NFC, etc.
- Your main customer target group are iOS mobile users.
Web Components are another tool you should consider if you want to develop front end apps. Check my article for a detailed explanation. In short, they are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Their usage will explode in 2019 and should be considered in any new project to create rich, portable and reusable applications.
Native vs Hybrid Mobile Development
In the mobile world, there are also many things to consider. There are several frameworks to consider and different strategies. The first consideration is whether you should use native platforms for Android and iOS or Hybrid Frameworks.
What is a Hybrid Framework?
So, a hybrid framework brings more features than a PWA, allowing you more control over the device but it is just focus on mobile applications delivered to the App and Play stores, so they are different.
Use Native When…
- You developer games or graphic apps.
- You need rich UIs supporting complex gestures, graphs, etc.
- You want to use the latest features and be first in the market in terms of innovation.
- You are only focus on one platform like iOS.
Use Hybrid When…
- You are build standard apps (90% of the market).
- You need to support both Android and iOS users.
- You have limited budget.
- You want to rely on open standards.
Hybrid Frameworks: Hybrid Native vs Hybrid Web
Hybrid Native choices:
- React Native is popular and fast but harder to use and only support React.
- NativeScript supports Angular and React and is also easy to user and faster than Ionic; but still more difficult to implement and way less popular
- Flutter is getting a lot traction, it is a great framework and you can build unimaginable user experience that you can only do with real native apps. It uses Dart programming language which is meant to be the main language of Google’s next OS Fuchsia. However, it is in its infancy and learning a new programming language could be challenging.
I suggest going Hybrid Native if performance and UI experience is very important and go with Ionic if you want simplicity and robustness.
The Ionic team then developer Capacitor for mobile development. Which merged Ionic Native (Cordova) with Electron, creating a high level abstraction that provides the same API for mobile, web or desktop. Capactior will detect where the code is running (Web, Mobile or Desktop) and execute the right API to access native features.
Ionic 4 embraces PWAs, Web Components, React/Angular, and Capacitor making it the first universal framework. Read this post I wrote about Ionic 4 for more details.
Regarding the back end there are two things that you need to decide:
- Cloud vs on-premises: Nowadays cloud is the main choice and it fits great with SPAs. Providers like Heroku makes development really cheap and easy.
- REST vs. GraphQL: Deciding on the API is critical. GraphQL is getting really popular for certain scenarios.
Next I will discuss GraphQL alternative to REST and AWS Serverless and Google Firebase.
GraphQL is another tool that you should consider. GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data. Check this article I wrote for all the details.
- Client side rich query language.
- Strong typed, well documented. Great for Baas.
- Easier to manage the back end services. Easier deployments.
- Great for rich mobile and web clients.
- Real time updates.
- No strict contract between client and server.
- Minimum cloud and Serverless support.
- More complexity on the client.
- Harder to learn. Less documentation.
Firebase is a BaaS offering from Google. Initially it provided a NoSQL database on the cloud but i has grown into a full back end as a service. With Firebase you can just focus on front end development without having to develop anything on the back end. It handles authentication, file storing, FaaS, machine learning, analytics, etc.
AWS vs Firebase
- AWS has more services.
- AWS has a better Serverless platform.
- Firebase is easier to use.
If you are starting from scratch and want to build rich mobile and web clients use Firebase, it is easier to get started. If you want a full enterprise back end with many services and a mature platform go with AWS.
Ok, so your boss have asked you to build a new website and mobile app, what do you do? At the end, it all comes down to two choices: React vs. Angular ecosystems.
Here are some considerations:
- Size of the project: Angular and Ionic, thanks to their component based approach, tend to be easier to divide for big teams.
- UI Complexity: With React is easier to build complex websites with a complex state machine thanks to Redux.
- Future Proofing: React is more popular and has more production running apps than Angular.
- Performance: React DOM(web) and React Native(mobile) tend to perform better than Angular(web) and Ionic(mobile)
- Budget: Angular is easier to get started with and less complex, so the overall cost will be less than using React.
- Support: Angular has a dedicated team behind which provides quick fixes and Ionic has enterprise support and tools such as AppFlow for DevOps and Ionic Studio IDE. React has more libraries and bigger community.
- Platform: If you just need a specific platform like iOS then go with the native platform.
- SEO: If SEO performance is important and you mainly serve content, use Next.js MPA.
In general, SPAs work better unless you are focused on a content base website. If you need to build a desktop and a web site then use Ionic/Electron. If you are on AWS, SPAs with the API Gateway should be the best option, if not, definitely check Firebase.
For Web/Mobile you have more options. This diagram could help you decide if you need both web and mobile clients:
In my opinion, React/React Native and its frameworks are beautifully engineered and perform great but they are harder to manage. Ionic 4 it is a universal framework that you should really consider to build your website in all frameworks very easy and cheap. You cannot go wrong with any choice it all depends of your own personal preferences. As a developer, I prefer React/Native but if I had to build a web site and mobile app for a customer I would probably use Ionic 4, plus it will support React very soon.
I hope you enjoyed this article. Follow me for future updates.