reusable-javascript
Reusable JavaScript Ushers In A New Era of Full-Stack Development
mm
Lucas Pedroso
Posted on: August 29, 2018
Development
Tags: development full stack javascript reusable
Tags: development full stack javascript reusable

Reusable JavaScript helps developers create innovative, high-quality software without sacrificing time or budget. Better yet, it makes full-stack development easier than ever.

JavaScript is the most commonly used coding language around, and its popularity grows every day. More important than popularity, though, is innovation. The JavaScript ecosystem is constantly evolving.

So far the most transformative development has been “reusable JavaScript”. Shared repositories of pre-made components create a shortcut through repetitive tasks without sacrificing quality, and they’re sparking a change in the way developers innovate.

The Value of JavaScript

In 2017 JavaScript was ranked the most popular programming language for the sixth year in a row, and for good reason. It’s a powerful language which plays well with other languages, so developers can use it in any webpage.

Being able to run natively in a browser makes it fast and lowers the server load. Through JavaScript frameworks and tools like React Native it can be used to build hybrid or cross-platform apps.

On top of that, JavaScript has a low barrier to entry. It’s easy to learn and easy to read. There’s a hugely active community behind it, with representation both in online repositories like GitHub and in local developer groups.

How Does Reusable JavaScript Work?

The flexibility and accessibility of JavaScript means developers have created and shared a lot of useful components with the community at large. However, for a while it was incredibly hard to find and use these tools on their own.

Developers had to follow a complex integration process for each component they borrowed, and maintaining them was a hassle.

That’s where packages and package managers came into play. A package is a reusable piece of software that serves as a shortcut to a specific task. Rather than recreating the component from scratch, developers can simply download the package and copy it into their project.

The package might or might not have dependencies required for it to work. Dependencies are complex to manage.

Sometimes when a package is updated some dependencies are no longer compatible and require the old version, creating a situation known to developers as “dependency hell”. This can’t be avoided by skipping updates, though; packages have to be updated to maintain performance and close security vulnerabilities.

The solution to this problem is package managers: tools that automate and simplify the use of packages. They automatically handle dependencies, configuring updates, installing new packages, and other tedious yet essential tasks. Package managers are what makes using so many different components possible, reducing the overall time spent on maintenance and installation.

Another reusable code trend gaining traction is the idea of a “starter kit”. This is a developer or organization-specific foundation for building apps that has all the basic opinions and configurations built in.

When beginning a new project, the team uses the starter kit as a jumping-off point. They don’t have to worry about skipping a step that might cause trouble down the road because the foundation work is already done.

This approach has several advantages. It eliminates the time spent on less productive discussions like arguments about syntax. Instead, the team jumps straight into the project at hand. Starter kits also streamline the quality control process by ensures the entire team is working to the same settings.

Why Not Start From Scratch?

Working with reusable JavaScript helps developers work at a higher layer of abstraction. They can separate concerns by functional components, not languages or tools, which lays the groundwork for new ways of looking at architecture.

The layer of abstraction necessary for reusable code does make it a little slower than pure JavaScript. However, that slight hit to speed comes with some valuable advantages over vanilla JavaScript.

Time

Enterprise technology moves fast. Businesses need to get their software finished and working towards ROI as soon as possible. Starting with a blank project every time is a much, much slower process than using reusable JavaScript. It eats up too much of the development schedule without a balancing increase in quality.

Quality

There are dozens of decisions to make when configuring a new project. It’s easy to forget a step or take shortcuts to compensate for the longer development timeline. When this happens the product could reach the market with avoidable flaws or weaknesses. Reusable JavaScript starter kits serve as solid foundations for quality software with no skipped steps. Plus, the time saved can be redirected towards user experience, leading to a better final product.

Practicality

It makes no sense to reinvent the wheel every time every time someone needs to go to the grocery store. JavaScript has been around long enough that there are plenty of solid, reliable packages that will take care of basic software functions while still holding to a high standard of quality. The performance gap between vanilla JavaScript and reusable code isn’t large enough to offset the risks of slower development.

Innovation

Time spent recreating components which have been built many times before is time that isn’t spent trying new things. It doesn’t push technology forward. Developers need to build on the community’s work if they want to reach higher levels of sophistication and create something new.

Going Full-Stack with Reusable Code

JavaScript frameworks built on reusable components blur the line between front-end and back-end development. These used to be handled by separate teams with very different skill sets. Because they were usually working in different languages, coordinating between the front- and back-end teams could lead to frustrating misunderstandings.

The current crop of frameworks makes full-stack JavaScript development more practical. Using one primary language end to end removes those barriers in communication that complicate interdeveloper cooperation. Everyone can read and understand each other’s work.

Using reusable JavaScript like this expands the tools available to developers, too. The front-end team has more to do than designing layouts. They can be more interactive and innovative.

Back-end developers have access to more tools for building out the front end. The team can work together to create a better experience for end users (which should be one of the primary goals of any software development project).

Developer productivity isn’t the only reason to use reusable JavaScript for both the front- and back-end. It harnesses many of the language’s benefits, such as:

  • Reduced server load
  • Faster response and page load times
  • Wide compatibility across devices and platforms
  • Easy maintenance and debugging
  • Offline access
  • Faster development and updating
  • Lower maintenance costs

Committing to Reusable Components

In this day and age most developers are probably already using reusable components to some extent. However, the majority haven’t fully committed to applying reusable code wherever it’s relevant. They’re missing opportunities to improve their products and provide faster development to their clients.

There are two main steps to making sure a company is realizing the full potential of reusable JavaScript. First, they should both use and contribute to package managers and code repositories.

Package managers are the form of reusable code mostly likely to be used by developers at the moment. The increasingly popular Node Package Manager (NPM) is the fastest growing, though others like Bower, jspm, and Duo have their uses as well.

Despite using package managers in rising numbers, a large portion of developers don’t publish their own work to these collections at the company level. That’s a missed opportunity. They should be taking reusable JavaScript a step further by creating shortcuts for their frequently used functions and adding it to the collected toolkits for anyone to use.

Sharing code like this meets resistance from a lot of executives who worry about giving away trade secrets. In practice, that isn’t a serious concern. Sharing components isn’t the same as putting completed software online for free; it won’t let competitors steal a product under development and release it early.

There are relatively few instances where publishing a package to NPM would put a company at risk. It’s just a harmless way to build the communal base of JavaScript knowledge.

Beyond that altruistic motive, sharing code builds a company’s reputation as an industry leader. Peers who use the components gain respect for the developer, which makes hiring and retention easier.

Reviews serve to validate the company’s expertise for potential clients. There’s also the possibility of spurring a new trend in programming that could inspire industry press attention, which leads to more and better clients.

Make it simple for team members to share their JavaScript components. Set up a standard procedure for use company-wide, and consider offering incentives for engineers who publish solid packages. At the very least it should be a positive factor in promotion or raise decisions.

The second element of adopting reusable JavaScript is more internal: creating a customized starter kit for JavaScript projects. This should be the result of a group workshop about company ideals and priorities instead of something created by executives and handed down.

Team members need to buy into the concept, and the best way to ensure that is to give them the sense of ownership collaboration provides.

These kits should lay out standards for start-of-project decisions, touching on topics like editors, bundlers, testing frameworks, preferred HTML versions, logging protocols, API structure, and anything else that makes sense for the company.

Aim for a “highest common ground” where many set-up decisions are premade but the team isn’t prevented from creative problem-solving.

However far developers take it, adopting reusable JavaScript should be seen more as an opportunity than a chore. The effort invested saves both time and money in the long run through the creation of faster, higher quality software.

Developers have nothing to lose by sharing their expertise- and everything to gain.

Final Thoughts

At the end of the day, reusable JavaScript (and by extension full-stack JavaScript development) solves a lot of problems raised by digital transformation efforts. It powers fast, agile development and takes advantage of a deep pool of talented experts. While JavaScript can stumble with computationally intensive projects, its combination of performance and speed makes it an excellent choice for enterprise software.

mm

Lucas Pedroso

A developer at Concepta is responsible for creating and maintaining software projects, preserving the quality, testability, and maintainability of the programs.