Our go-to Frontend stack

Our go-to Frontend stack

July 8, 2020 Software, Web Development

We gathered the most efficient and modern technologies for building custom frontend apps. We also built a template with them to kick-start our projects!

The recipe for our favourite frontend template contains:

  • PWA (Progressive Web App)
  • React, Redux & Saga
  • Code splitting & lazy loading
  • Sass modules, Bootstrap & Framer
  • Auth0 integration
  • Push notifications

Progressive Web App

We, as users, use many different devices and operating systems. It is very hard to target all of them when developing an app though. We have been involved with such development in the past and we know for sure that this is not the way forward.

Progressive web apps offer tools to develop your app with web technologies and make it accessible and installable to all devices through the web. The technical benefits of shipping our projects through Progressive Web Apps are:

  • Code once deploy everywhere since it runs inside a browser, allowing us to keep our code clean and focused
  • Avoid the added complexity of shipping to each platform’s market since the app can get installed from the browse.
  • Aggressive caching of the app which makes it work even without internet connection
  • Seamless updates without installations

React, Redux and Saga

React

There is a huge debate on which frontend framework is better. We say React. We have worked in many frameworks including Vue, Angular JS, Angular, React, Handlebars, Ember, Backbone and others but the React theory is what suits us. It is the simplest to work with by far, it is lightweight and scales up very well.

Redux

Working with just the component’s internal state might be sufficient to create stateful apps. For the most cases though, this state must be shared across several components. Then we use Redux.

Many say that Redux is verbose and has a lot of boilerplate. We find that absolutely logical and mandatory for the benefits it provides. Once you create all shared state logic with Redux you ll enjoy simple debugging, simpler components and easy expandability. The motivation and concepts behind Redux is a very inspiring and a must-read for us.

Saga

Redux expects all changes to the state to be predictable, in other words “pure”. To manage unpredictable state changes (like the response of an api call) we use Redux Saga. We have heavily used other popular solutions like Redux Thunk and Redux Observable and believe that Sagas are of best value.

Code Splitting and lazy loading the app

Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand. When creating a new project with Create React App, the ability to automatically do that comes built in and the best way to implement it is Suspense and Lazy from React. That said, having a proper folder structure is a must-have and will make life easier.

Sass modules, Bootstrap and animations

Sass is one of the best CSS preprocessors and very similar to its rival LESS. It offers great extendability to CSS and makes coding much faster.

One way to control a project’s stylesheets even more is by utilizing css modules on sass files. In CSS modules, all class names and animation names are scoped locally by default. By importing the sass file in a React component you can export its class names and use them to fill in an element’s class name. On build time, this will generate unique class names which makes this a way to avoid name collisions and unexpected styles in elements.

For common elements like Tabs, Dropdowns, tooltips etc as well as grid system, we use Bootstrap.

A mandatory requirement for an modern app these days is animations. Even in very formal projects, where animations are considered “too much”, some transitioning is required to aid the human brain to the right decisions.

We use CSS transitions to smooth things in viewers eyes and CSS animations for more surprising effects. There are projects that require having complete control over the animations through javascript. For such cases we use Framer.

Auth0 integration

Many web applications require user authentication. We have worked for many years with Auth0 and strongly recommend this. It has a free tier, uses JWT and provides everything a project could require no matter its size. Things like user registration, email verification, login via social accounts, passwordless authentication, forgot password and so much more. Auth0 provide detailed documentation in all major frameworks like React, Angular, Vue, React Native, Android and many more.

Push Notifications

A very important factor for a successful app is re-engagement. PWAs offer access to each vendor’s notification system (eg. fcm for google chrome) via the service workers. Here is a very useful tutorial on PWA notifications.

 

error
  • RSS
  • Follow by Email
  • Facebook
  • Twitter