Modern front-end development technology stack

This article will introduce the revolutionary developments in JavaScript development over the past few years.

In recent years, the methodology of application development has undergone tremendous changes. With the rise and development of microservice architecture, cloud computing, single-page applications, and responsive design, developers need to make a lot of decisions while ensuring project development progress, user experience, and application performance. Today, this is especially true for front-end development and JavaScript.

To help you catch up, let’s first take a brief look at the revolutionary developments in JavaScript development in recent years. Then, we’ll look at some of the challenges and opportunities facing the front-end development community.

JavaScript Renaissance

When NodeJS was introduced in 2009, it was more than just JavaScript that could be run in the command line or on the server. NodeJS revolutionized a pressing problem in software development: a mature and stable ecosystem for front-end developers. Thanks to Node and its default package manager npm, JavaScript experienced a renaissance in application development and app building. The ecosystem flourished, but since Nodejs was still young, it often had problems.

Fortunately, the past few years have seen a peak in the use of coding patterns and coding standards. In 2015, the JavaScript community witnessed the release of ES2015, and the ecosystem exploded again. The following description only shows the most popular part of the JavaScript ecosystem.

At Kenzan, we have been developing with JavaScript for over a decade on a variety of platforms, from browsers to set-top boxes. We have seen the front-end ecosystem grow, evolve, and embrace all the positive efforts made by the community. From Grunt™ to Gulp, from jQuery® to AngularJS, from copying scripts to using Bower to manage front-end dependencies, we have experienced it all.

As JavaScript matures, so does our development process. When designing elegant, stable, and mature software applications for client development, we realize that a robust local development workflow and technology stack is the cornerstone of our success. The pursuit of reliability, maturity, and efficiency in the development process has made us realize that the entire development environment is not just a collection of tools, but on the contrary, a good development environment contributes to the success of the final product.

Challenges and opportunities

With so many choices and such a thriving ecosystem, where does the community go from here? While having choices is a good thing, it can be difficult for the community to determine where to start, what is needed, and why. As user expectations grow about how applications should run and behave (load faster, run smoother, be responsive, work like native apps, etc.), it becomes increasingly challenging to balance the productivity needs of the development team with the need for the project to be launched and successful in the intended market. There’s even a term for this called analysis paralysis: making decisions a difficult problem due to overthinking and unnecessarily complicating the problem.

In the engineering development cycle, blindly pursuing the latest tools and technologies will restrict the development speed, hinder the achievement of major milestones, and bring the risk of delayed listing and customer loss. To a certain extent, a team needs to clarify its own problems and needs, and then make decisions from the available options, recognize the pros and cons, so as to better predict the long-term feasibility and maintainability of the product.

At Kenzan, our experience has allowed us to define and integrate some key concepts and theories to ensure that our decisions help solve the challenges we anticipate when developing front-end software:

• Take advantage of the latest features provided by the JavaScript language to support more elegant, consistent, and maintainable code (such as import/export (modules), class, and async/await).

• Provide a stable, mature, low-to-no-maintenance (i.e., developers do not need to install or maintain global development dependencies, and have an intuitive workflow/task flow) local development environment.

• Use package managers to manage front-end build dependencies.

• Deploy optimized, feature-based bundles (HTML, CSS, and JS are already packaged) to provide users with smarter and faster distribution and downloading. Combined with HTTP/2, you can achieve a small investment and high output effect, which can greatly improve user experience and product performance.

New technology stack

In this series, we’ll focus on three parts of the front-end development stack. For each part, we’ll look at the tools we think provide the best balance of reliability, efficiency, and maintainability for modern JavaScript application development.

Package Manager: Yarn

The challenge of managing and installing external vendors or internal packages in a reliable and reproducible way is crucial to the developer's workflow. At the same time, maintaining CI/CD (continuous integration/continuous delivery) is also crucial. But which package manager do you choose to evaluate all the above features? npm? jspm? Bower? CDN? Or do you just copy and paste from the Internet and commit it to the version control?

Our first article will take a quick look at Yarn and how it focuses on speed and providing a stable build process. Yarn ensures that the versions of dependencies installed one time are exactly the same as the versions installed the next time. It is necessary to ensure that the whole process is smooth, reliable, distributed, and scalable, because any pause will affect the cadence of developers programming or deploying applications. Yarn aims to solve these problems and manage dependencies by providing a fast and reliable alternative to the npm cli, but still using the npm registry to install public Node packages. Moreover, Yarn is maintained by Facebook, who had a plan when developing this tool.

Application Bundling: webpack™

The front-end applications we build, which are usually composed of HTML, CSS and JS as well as binary formats such as images and fonts, can be difficult to maintain and even more challenging. So, how do you transform a code base into an optimized, deployable project? Gulp? Grunt? Browerify? Rollup? Systemjs? These things all have their pros and cons, but we need to make sure our choices can achieve the principles we discussed above.

Webpack is a build tool that is specifically designed to bundle web applications into an optimized carrier and deliver it to users. Web applications may contain HTML, CSS, JS, images, fonts, etc. If we want to use the latest language features, such as import/export and class, to make our code cleaner, and let the tool bundle the code to optimize it for both browsers and users, then Webpack can do all of this, and more!

Language specification: TypeScript

Writing clean code has been a challenge since the dawn of time. JavaScript is a dynamic, weakly typed language that provides developers with a medium for applying various design patterns and specifications. Now, with the latest JavaScript specification, we can see a more solid model for the programming community. Support for features such as import/export and class has brought a fundamental paradigm shift to JavaScript application development and ensured that the code is easier to write, read, and maintain. However, there are still flaws in the programming language, and usually as the application grows, the application itself begins to suffer: the maintainability and integrity of the source code and the predictability of the system (the application state at runtime).

TypeScript is a superset of JavaScript that adds type safety, access modifiers (private and public), and new features for the next version of JavaScript. The safety of a strongly typed language helps the compiler validate the code before it goes to the browser, promoting and enforcing architectural design patterns that help shorten developer cycles while also being self-documenting. This is particularly beneficial because as an application grows and code changes in the codebase, TypeScript helps keep regression detection while adding clarity and confidence to the codebase. IDE integration is also a huge win.

How to choose a front-end framework?

You may have noticed that so far we have been avoiding recommending front-end frameworks or libraries like Angular or React. Well, now is the time to talk about them.

Different applications require different development methods based on development team experience, size, team preferences, and familiarity with concepts such as responsive programming or functional programming. At Kenzan, we firmly believe that whether it is Angular2 or React, the evaluation and selection of any ES2015/TypeScript compatible library or framework should be based on the specific characteristics of the development scenario at the time.

If we revisit earlier projects, we see a new technology stack that provides great flexibility in the choice of front-end frameworks.

A modern development technology stack that provides great flexibility in front-end framework selection

Below the “view” layer above is a common node where we can build applications with tools that embody some key principles. At Kenzan, we believe that this technology stack provides a choice space for both user needs and developer experience. The result can benefit any team and any application (large or small). Please keep in mind that the tools introduced here are for a specific type of project development (front-end UI applications) and are not a one-size-fits-all solution that can be applied to all applications. Trade-offs, judgment, and team needs should be important factors in decision making.

What to do next

So far, we've reviewed how the JavaScript renaissance over the past few years has led to the formation of a rapidly maturing JavaScript ecosystem. We've developed core concepts that help us address the challenges and opportunities we encounter when developing front-end software. We outlined the three main components of a modern front-end development stack. In the remaining chapters of this series, we'll take a deeper look at each of these parts. Hopefully, by the end, you'll be better able to assess the infrastructure you need for your front-end applications.

We also hope that you will recognize the value of the tools we provide, guided by a set of core principles, paradigms, and philosophies. This series has undoubtedly exposed our own development experience and development process to the public, and has also solidified our philosophy when it comes to front-end tooling. We hope you enjoy what we share, and we always welcome any thoughts, questions, or feedback.

Next in our blog series, we will take a closer look at the first core component of our front-end package management using Yarn.

Kenzan is a software engineering and full-service consulting firm that provides customized, end-to-end solutions driven by digital transformation. Combining leadership with technical expertise, Kenzan collaborates with partners and customers to provide complete solutions from concept to development to delivery using cutting-edge technologies. Kenzan is a technology-driven company specializing in application and platform development, architecture consulting, and digital transformation.