Front End Web Development Guide: Web and Mobile

11 min readAug 21, 2021

This is a quick summary of all different options and choices you have for front end development including web and mobile applications for any platform.

Introduction

JavaScript is eating the world. As Baas and server-less grow in popularity, front end development becomes the key customer enabler for organizations. 2019 is the year where most of the innovation and development will occur on the client side. However, there is a wide range of frameworks and solutions to choose from; and lots of things to consider. Making the right choice for your organization is crucial for the success of your enterprise. This guide will help you make that decision. Each section will focus on one consideration and the conclusion will provide a quick summary. I assume you have already good knowledge on web development with JavaScript, check online for more details.

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.

SPAs Pros

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.

SPAs Cons

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.
Your team have great JavaScript skills specially with modern frameworks like React or Angular.
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 Dev team have Java knowledge but limited JavaScript skills.
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.
You don’t need to use many external JavaScript libs.

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.
Your team have good knowledge of JavaScript and ES6.
You want high performance and two separate code bases for mobile and web but a hybrid approach on mobile with great performance.
You need access to many JavaScript libraries and the latest technologies like GraphQL.
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 have native developers in your team and their main skill is JavaScript.
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

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?

Traditionally, companies who want to compete in the mobile market had to create applications for iOS and Android, using their respective proprietary platform; this implied that you had to have separated teams with separate skills to develop and maintain two separated applications with the exact same functionality; which was very expensive. Hybrid apps came to the rescue by providing a way to develop mobile apps using known languages like JavaScript mobile apps for both platforms. A Hybrid framework is a development tool which allows developers to use a single code base and release to both, App and Play stores.

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 have Java and C# skills but no JavaScript skills in the team.
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 want to use web technologies (JavaScript).
You have limited budget.
You want to rely on open standards.

Hybrid Frameworks: Hybrid Native vs Hybrid Web

Have a look to this great video which compares the different hybrid frameworks. There are frameworks such Ionic which run on the WebView(browser, Hybrid web) and hybrid native frameworks like React Native or NativeScript that use JavaScript but compile to native code which is faster. Ionic is the best Hybrid web framework. For Hybrid Native you have more choices.

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.

Universal Frameworks

There is a new trend which tries to unified all platforms using JavaScript. Can I have a single code base for Android, iOS, Web and desktop? This is now possible thank to Frameworks like Ionic 4.

It all started with Electron, a framework that allowed you to build desktop apps using JavaScript. The framework got very popular and you probably have run in your laptop Electron based apps in the recent years.

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.

Backend

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

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.

GraphQL Pros

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.

GraphQL Cons

No strict contract between client and server.
Minimum cloud and Serverless support.
More complexity on the client.
Harder to learn. Less documentation.

Firebase

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

AWS provides a serverless platform to deploy and manage your applications. A common pattern is to use a SPA connected to API Gateway, Lambda functions and DynamoDB. Check this course for more info.

Serverless Architecture in AWS with DynamoDB and Lambda functions.

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.

Conclusion

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:

Team expertise: Do you have good JavaScript skills? ES6? If not, Angular may be easier than React. If you do, React may be easier if you team doesn’t know TypeScript.
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: