In this blog post, I present the technological stack we use at Ackee frontend team for building modern web applications. We have a few different stacks for concrete use cases, but almost all of them are derived from JAMstack architecture, which has gained popularity in recent years.
JAMstack
JAMstack stands for Javascript, API and Markup. It is a way of developing client web applications in Javascript, communicating with a backend server through HTTP protocol and serving static files (often pre-build) though a Content Delivery Network (CDN).¹
We have been using these concepts for over five years now. Though we constantly update and modernize it. Our base stack can be divided into three categories based on the size and use-case of a project. I am going through all of them briefly.
Single-page web apps
A great part of our portfolio are enterprise and highly interactive web applications. We develop them as Single Page Applications (SPA) in React in combination with Redux for state management on a customized fork of Create React App (CRA) as a base skeleton for our projects. The CRA skeleton is ready to enable Progressive Web Apps (PWA) features like content caching or browser push notifications. Communication with a backend server, usually REST API, goes directly from Javascript through HTTP protocol or gRPC. We have a small library called Antonio for that purpose.
The main advantage of this approach is web frontend decoupled from backend, which leads to independent and scalable development. We like principles and mental models of React as it often provides elegant solutions to complicated tasks and is fully customizable.
Microsites and static websites
Gatsby.js is the main choice for microsites and more static websites. We really like it, because we can develop a website in React like any other web app and it is then automatically converted into static HTML markup at build time. We can even stick to JS-in-CSS approach with Fela library which has proven itself for a state-driven styling and atomic CSS generation. Another good feature is data querying at build time from many sources (e.g. Google Docs/Sheets). Last but not least, Gatsby site can be easily converted into PWA. That's what we have done with our website for open-source projects.
Isomorphic web apps
Both previous categories are compliant with the JAMstack principles, but when there is a need for better SEO, isomorphic web apps perform better. When we develop such a project, we keep our CRA skeleton and enhance it with a Node.js server for serving rendered HTML pages. This setup is usually a little harder to maintain and it has some pitfalls compared to the previous two.
Deploy
Continuous Integration/Delivery and deployment from GIT repository is a standard for us. Web applications and microsites are deployed as static files to Google Cloud Bucket. Content from the Bucket is served through Cloudflare Content Delivery Network (CDN) so fast delivery is guaranteed. Find out more info in our other blog post.
Conclusion
In this blog post, I showed you the technologies we use for web app development and the way how we deploy. We frequently discuss new options and regularly update our tools to keep pace with fast development in the frontend field and to provide the best services.
[1] Jamstack.org
