JavaScript Monorepos in 2024: Legit or Sus?

JavaScript Monorepos in 2024: Legit or Sus?

Zach Gardner Articles, Development Technologies & Tools, JavaScript, Programming, Tutorial 2 Comments

I’ve been developing JavaScript through all of the major existential changes we’ve had. Browser wars? I remember those. Trying to make a complex application before Firebug? Oh yeah, tell me about it. Having to roll my own AJAX request by hand? Vividly remember.

Something that I experienced in all of my large JS projects before the last few years was an eventual point of no return, a metaphorical event horizon, beyond which the amount of time it took to build the code locally as well as on the CI/CD system was just simply too long.

All projects start fine, but as they grow and evolve and change over time, the amount of build time seems to creep up until it becomes inimical to deploying and testing changes in any reasonable time frame. Further, it becomes very difficult to onboard new developers as any change they make is not isolated, and must take into account all of the other code in the app. Granted, frameworks and libraries like React do help to some extent, but there are no clean-cut boundaries on the source code with different features, it always had to be by convention.

It was during a project a few years ago that I finally put my foot down and decided that something needed to be done. Researching how other architects were doing it, I came across JavaScript monorepos. I was familiar with the concept of monorepos from my research on how Google structures their code base (they have to repos, one for YouTube and one for everything else, no joke), but had never thought to apply that same principle to JavaScript. So I dove in head first, made a lot of mistakes, iterated, and finally got to a place where I feel comfortable sharing my lessons learned.

This blog post is not an extensive study, but it is enough to get you interested in a way to solve two common problems we all have (i.e. sluggish build times and inability to effectively onboard new devs due to lack of feature separation), and give you enough of a context around how I approached the problem to determine how you should proceed.

Part 1: JavaScript Application Introduction

Chris Berry Articles, Development Technologies & Tools, JavaScript, Node.js, Single-Page Application, solidfoundationsseries, Vue.js 2 Comments

Part of the Solid Foundations Learning Series
This is the introductory post to an in-depth series of articles that will tell the story of why and how a specific web application was built. In a nutshell, it is a JavaScript-based suite of single-page applications optimized for use in a microservice environment.

In this post, we will set the stage for the series and introduce the overall design and structure of this application. In future posts of this series, there will be technical discussions about certain parts of the application and there will be theory discussions for other aspects of the application.

The web application we will be talking about started its life as a simple NodeJS and Express application….

The Wonderful Wide World of webpack: Unpacking Awesomeness

Aaron Diffenderfer Articles, Development Technologies & Tools, JavaScript Leave a Comment

In the past couple of years, webpack has come a long way. It continues to rapidly evolve and revolutionize the way we bundle JavaScript and more. For some of us that have been doing development for more than a few years, seeing an amazing tool like webpack and all of its abilities is mind-blowing. If only it had come into existence a bit sooner…

If you’re like me, you may have stumbled across webpack, hearing about its gazillion configuration options, along with a bunch of plugins, numerous ways to optimize your bundle, and more. So much that it all makes your head spin and you begin to feel overwhelmed as you attempt to make sense of it. That’s honestly how my journey began with Webpack.

My first exposure to it…Ejecting the webpack.config.js file from an AngularCLI project just to see what the all the hype was about and to see what I had been missing out on the past few years. After getting past the initial shock of the number of lines of code and the seemingly large structure (how I felt after my first few glances, having to shield my eyes and take a few deep breaths), I started to see many of the benefits. This continued as I read through the webpack documentation, various blogs, and StackOverflow (every developer’s most-accessed site) and as I began trying out a variety of configurations for some actual projects.

As I discovered, webpack can be used with zero config or configured literally in 8,675,309 ways, plus or minus a handful. And there about just as many blogs that cover all of the variations and flavors.

In this post, however, the goal is to highlight some tips & tricks along with features I’ve found to be particularly useful and reasons why you should be using webpack – if you haven’t already started…

Building Applications Using the backbone.khs Framework Extension

John Boardman Articles, BackboneJS, Development Technologies & Tools, JavaScript, Node.js Leave a Comment

Backbone is a very powerful application development framework. However, it can be a little “close to the metal” in terms of how much work is needed to produce a working application with it. I see Backbone as a low level framework that could use some help in making it a bit easier and faster to use.

Keyhole has released an extension to help! The backbone.khs framework extension npm module (available by clicking the link) does its best to minimize the work necessary to get a Backbone application up and running.

The extension makes it easier to deal with:
• browser history
• root level non-Model Object implementation
• caching
• session support
• regions (which break pages up into more workable segments)
• a top-level Application object to manage the application
• modules to help with page and URL routing
• a Backbone View extension to seamlessly integrate Backbone Stickit and make Marionette templates easier
• a Collection View to enhance working with groups of items.

In this blog, I’ll describe these enhancements with some code examples…

Taking A Mixed Approach To Single-Page Applications

Chris Berry Angular, Articles, Development Technologies & Tools, JavaScript, Single-Page Application Leave a Comment

A coworker came to me with a problem. The client he was working with would be building hundreds of single-page applications and all would need to be tied into a single shell application. He had first attempted to use an iFrame contained within another single-page application to display the child applications.

While this worked, he came up against another requirement: the child applications may or may not need access to data from the parent shell application.

It was at this point he came to me for suggestions. I had been playing with this exact idea for sometime; how can you manage a collection of Single-Page Applications and still share data between them?

At this point, I decided to create a hybrid solution of mixing Single-Page Applications with a server-rendered shell application. The following is the process I took for creating this solution, highlighting some of the pain points with some suggestions for further enhancements.