Full stack example: webpack + Globalize

[rxaviers]

PR #481

Provide better documentation by creating a full stack example using webpack and Globalize.

Ref #441 #467

Goal

Development

• Easy development, Globalize is a powerful and flexible library, but it can be frustrating to set it up (e.g., loading required CLDR data on development, using compiled data instead on production). It should be easy for developers to build apps using Globalize. Ideally, they should be able to use Globalize (declaratively) without worrying about any of these setups.
• Fast Live Reload, Webpack allows writing code in source code formats that browsers don't natively interpret (e.g., coffee script, ES6, less or sass styles, etc) and have them to display it in real time by pre-processing the code into a compatible JavaScript and by having browsers to auto refresh on a process called live reload (HMR Hot Module Replacement), which is a very powerful tool. But, it's frustrating when the pre-processing takes too much time and doesn't get responsive. Ideally, Globalize on development shouldn't weight the process, it should allow for very fast updates from its part.

Production

• Optimized for Production, use precompiled formatters/parsers: Runtime code (smaller and quicker) for production #398
  • Small. Avoid including unnecessary i18n data. For example, doesn't include unnecessary translation messages, doesn't include unnecessary functionality data (e.g., doesn't include calendar information if not formatting dates, doesn't include currency data if not formatting currencies, etc), doesn't include unnecessary data within the same functionality (e.g., doesn't include month names if formatting dates using numbered months only). Thefore, no bandwidth is wasted.
  • Fast. Have all formatters (numbers, currencies, datetimes, relative time) generated/preprocessed at built time. This is, traversing CLDR data and generating the formatters will happen during build time and will be precompiled for runtime. Therefore, no CPU clocks are wasted on the client.
• Compiled-Globalize-Code in separate chunks, allow grouping compiled-globalize code in separate chunks.

[rxaviers]

@jquense, @JeremyRylan, @unindented, @jamischarles, @sompylasar, bundling Globalize with Webpack should work and I'm copying you, because you have shown such interest before and your input is very much appreciated.

An example that demonstrates how to develop an app using Globalize with webpack will be included in our repo. This example is going to be our recommendation on that regard.

In the description above, I've started a list of goals that the example should address. Do you have any other requirements?

I've started implementing the example at #481. Your input there (check if the example really works for you, code review, etc) is also very much appreciated.

[sompylasar]

@rxaviers Great work! Thanks for pinging me in. I've added a couple of comments to the PR. I've got more thoughts on real use cases I'm struggling with but they aren't shaped well enough to share yet.

[rxaviers]

Thanks @sompylasar

[unindented]

Sorry I didn't try this before, I was on holidays.

This looks great. The example worked for me both in development and in production modes.

The only issue I had was that modifying translation files didn't trigger a hot reload. Not a biggie, and if it's a limitation of how the plugin works, I'm totally fine with it.

Thanks for your work @rxaviers!

[rxaviers]

The only issue I had was that modifying translation files didn't trigger a hot reload. Not a biggie, and if it's a limitation of how the plugin works, I'm totally fine with it.

True. Created rxaviers/globalize-webpack-plugin#5 to keep track of it. Thanks

[warstick]

@rxaviers Hi rxaviers,
i am trying to run the globalize by webpack on windows. When i am trying to run this example.
https://github.com/jquery/globalize/tree/master/examples/app-npm-webpack

i am getting following error.

Module parse failed: C:\path\globalize\app\index.js ENOENT: no such file or directory, open 'C:\path\globalize.tmp-globalize-webpack\C:\path\globalize\app\index.js'

FYI: I run this application by 'npm run build' command.

how can i resolve this issue. I am new to webpack. Can you please help me ASAP.

[rxaviers]

Hi @warstick, I'm sorry but there's an issue with the webpack plugin for windows. Although, the fix should be pretty trivial. Please, refer to rxaviers/globalize-webpack-plugin#7. PRs welcome 😄

[warstick]

@rxaviers Thanks for fast replay :) But i tried the same way you suggested. Still, same issue coming.

[rxaviers]

Please, can you give me more details (e.g., paste the output you get or any other debugging info). Preferably in rxaviers/globalize-webpack-plugin#7. Thx.