The Wonderful Wide World of webpack: Unpacking Awesomeness

Aaron Diffenderfer JavaScript, Technology Snapshot 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 BackboneJS, JavaScript, Node.js, Technology Snapshot 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 AngularJS, JavaScript, Problem Solving, Single-Page Application, Technology Snapshot 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.



NPM

Automate your front-end development environment with npm

Joseph Post JavaScript, Technology Snapshot, Tutorial Leave a Comment

For JavaScript development, there are more build tools than you know what to do with. The non-verbal utterance category contains the two most popular ones, Grunt, and Gulp. Then you have your food-related tools, like Brunch, Mimosa and Broccoli. You’ve got fancy new hot stuff like fly. Then there’s classic make-like tools like Cake, Jake and ShellJS’s make. Some folks just …