Migration to Webpack

Registered by Vitaly Kramskikh

User story: As a Fuel UI developer, I want to migrate to webpack from require.js, so that I can significantly improve my developer experience

Description:
Currently we use require.js module loader, AMD modules format and r.js build system. We've been using these technologies from the very beginning (more than 3 years ago!) and now they seems to be outdated and causing lots of problems to us. Here are some of them:

    - Different approaches for nodejs and in-browser compilation of styles and JS - this doubles efforts to support them and doesn't guarantee that a change made in dev environment will work in production. Some transformations (like CSS-autoprefixer) are even not possible (or very hard to setup) in browser. Webpack uses single approach for every environment.
    - Long in-browser compilation time. On my laptop I have to wait about 10-15 seconds after hitting F5 for loading and compilation. Webpack allows hot updates without refresh which take effect in 1-2 seconds.
    - Inability to use original LESS styles from twitter bootstrap. With require.js we have to use precompiled CSS styles (attempting to load LESS styles directly results in extra 20s of compilation time). With webpack we can use original styles with minimal impact on performance.
    - Limited ability to use NPM-delivered modules. Require.js has to rely on Bower for delivering in-browser modules, which results in having both versions (NPM and Bower) of many dependencies. Webpack allows us to ditch Bower.
    - With require.js too granular modules may lead to longer loading times. Thus we currently try to put as many related stuff to a single module as possible, which has impact on unit-testing as we usually expose only 1 component from a module. Webpack will eliminate such limitation.
    - ES2015 - webpack allows us to write code using ES2015 syntax and use ES2015 modules (official JS modules standard). It's hardly achievable with require.js - we have to use AMD and ES5.

Blueprint information

Status:
Complete
Approver:
Vitaly Kramskikh
Priority:
Medium
Drafter:
Vitaly Kramskikh
Direction:
Approved
Assignee:
Vitaly Kramskikh
Definition:
Approved
Series goal:
Accepted for 8.0.x
Implementation:
Implemented
Milestone target:
milestone icon 8.0
Started by
Vitaly Kramskikh
Completed by
Vitaly Kramskikh

Related branches

Sprints

Whiteboard

Gerrit topic: https://review.openstack.org/#q,topic:bp/webpack,n,z

Addressed by: https://review.openstack.org/219036
    Replace require.js loader/r.js builder with webpack

Gerrit topic: https://review.openstack.org/#q,topic:webpack,n,z

Addressed by: https://review.openstack.org/222376
    Karma test-runner intergration

Addressed by: https://review.openstack.org/230805
    Remove casperjs and phantomjs from dependencies

Addressed by: https://review.openstack.org/231538
    Blueprint: webpack

Addressed by: https://review.openstack.org/238471
    Explicitly enable webpack polling via watchOptions

Addressed by: https://review.openstack.org/242733
    Improve webpack integration

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.

Subscribers

No subscribers.