7

Bundling front-end code into standalone modules

over 8 years ago from , Senior Interactive Designer / Developer with Hoefler & Co.

Doing some research around bundling front-end dependencies into portable modules and wonder, what are your recommendations?

My needs:

I'm working on a form for a site that relies on three files: JS (for validation and reactive fields), CSS, and an HTML template (currently JST, but can be Mustache/Handlebars/Whatever). This form needs to appear in various places throughout the site, often with minor differences (some fields can be hidden in certain views).

What are my options for bundling this code into a portable module? Do you have experience with anything in particular that you can recommend?

THANK YOU!

16 comments

  • Ian WilliamsIan Williams, over 8 years ago (edited over 8 years ago )

    Hey Brandon, depending on what your needs are, look at both Webpack and Browserify. I know browserify supports IE8, but I'm not sure about Webpack.

    Webpack was built for this kind of thing, but if Browserify looks more appealing to you, you'll have to deal with the CSS/HTML in your JS manually. I've used it for just this kind of problem before and it's perfect for bundling/loading modules.

    Cheers! Tell Jimmy I say hey.

    1 point
    • Brandon Durham, over 8 years ago

      Webpack and Browserify are the two I'm looking at currently. Fairly familiar with Browserify, and Webpack is quite similar in its form. Loving them both! Today's research has definitely yielded some really nice “AHA!” moments.

      So I presume you've use Webpack? Regardless, what are you using as the view part of your setup? I see a lot folks are using React. Do you have a preference?

      Jimmy says hi!

      1 point
      • Ian WilliamsIan Williams, over 8 years ago

        Yep I've used both. Webpack's strength is optimizing bundles. You can bundle assets to split larger projects into smaller chunks so a user isn't downloading unnecessary code at the wrong point. This is a great intro on that.

        React is wonderful, but for a single module (especially a form) it might be overkill. It's a big library, and it requires some boilerplate code to get up and running. For example, every change in an input must be accounted for. See the "An Application" section midway down the page: https://facebook.github.io/react/ . Again, React is wonderful when you've just come out of dealing with DOM event spaghetti soup, but in your case there could be a simpler solution.

        I'd say, since it seems like you are building a shared module with some configuration, I'd really look at Vuejs. It has the same power as Angular Directives, but with a much smaller footprint and simpler API. You could include the module in pages that require it, then set it up directly in the rendered page and it'll just work like magic. I've used it on a form heavy app and it was super fast. Love it.

        Feel free to DM me if you need some more help. Best!

        2 points
        • Duncan ReganDuncan Regan, over 8 years ago (edited over 8 years ago )

          While it's true that react does have to account for inputs on form elements and it is a bit strange to wrap your head around, in practice, you'll probably only make a single input element and then duplicate it ad nauseum throughout the form.

          It might be overkill for a small form, but it's just so darn fun to work in, it's worth it.

          For a form, rather than actually coding inputs, you could build an array of objects that describe everything about the form, map through them and display it using only a handful of components throughout. Then to display a different form (or a slightly modified one), you you only have to tweak the objects a bit and bam! new form.

          1 point
      • Ian WilliamsIan Williams, over 8 years ago

        Oh, forgot to add: Vue is built for use with Browserify :)

        1 point
  • Timothy KendallTimothy Kendall, over 8 years ago

    WebComponents are perfect for this. However browser support is iffy.

    1 point
  • Timothy KendallTimothy Kendall, over 8 years ago (edited over 8 years ago )

    Riot is another option. Like React but smaller (not as battle-tested however) - personally haven't used it (yet). https://github.com/muut/riotjs

    I've personally used Angular (heavy and mainly for SPAs), Polymer (too slow in all browsers except Chrome), and React (best right now).

    The big libs React/Angular/Ember are overkill for just building out a couple of components. That being said, composing elements with JSX (optional React lang) and Webpack is VERY nice!

    There's still not a perfect solution for what you want but there's definitely some good options for the time being ;) Sounds like a good option for you would be to go with a smaller lib like Vue or Riot.

    0 points
  • Varun VachharVarun Vachhar, over 8 years ago

    React.

    Use https://github.com/js-next/react-style to handle isolated style-sheets.

    0 points
  • Ciriac TrompCiriac Tromp, over 8 years ago

    Angular directives is definitely the way to go.

    0 points
  • Jordan LittleJordan Little, over 8 years ago

    I've been working towards a similer idea. I'm basing my work and ideas on Rizzo by LonelyPlanet.

    http://rizzo.lonelyplanet.com/styleguide/ui-components/cards

    0 points
  • Ian WilliamsIan Williams, over 8 years ago

    Sidenote: Checkout Vue if you want Angular directives for cheap (19kb gzip). That way you can do this:

    <myFormThingy option-one="cool" validate-email="true"></myFormThingy>

    0 points