Embraces Webpack #63
Merged
Embraces Webpack #63
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
I guess I'm a modern front-end developer now. 🤓 Apply this commit to add support for webpack through the webpacker gem. I've included the development version for webpacker in order to add support for the on-demand compiling, a feature that is not currently present in the latest released gem. If it turns out to be buggy or unsafe for production, I'll rely to using the stable version (2.0 at the moment), even though that requires to use the webpack-dev-server to compile assets in development. bin/rails webpacker:install is also executed. Therefore this commit has everything required to start using webpack.
Apply this commit to port all the application .js files to vanilla JS, making jQuery unnecesary for them. jquery-ujs has been replaced with the vanilla rails-ujs added in Rails 5.1 also. This means that makigas.es sources do not depend anymore on jQuery. It is required for Bootstrap, though, so it's not actually being removed. It will be removed given one of the following cases: * Bootstrap is refactored to not depend on jQuery (vanilla JS). * A native vanilla implementation for the navbar without relying on JS is developed. The only Bootstrap component I use that depends on jQuery is the navbar. Note that there have been a few losses with this change: * The Read more button at the front header does not animate anymore. At some point it would be nice to add the animation scroll effect again. Clicking the button should animate the scroll. * The front navbar is not transparent anymore in order to avoid the need for porting the "de-transparentize" effect when the navbar is toggled, as the navbar events are only sent through jQuery, not through native JS.
Bootstrap, jQuery, Rails JavaScript and Cookie Consent are now considered third party assets and thus are served through Webpack. In future changes, maybe all the JavaScript source code will be served through Webpack. This fixes some regressions, such as Bootstrap Glyphicons not properly loading in production because sprockets doesn't digest the webfonts for rendering those icons.
At the moment there is no proper way for Webpacker to generate assets when being run within RSpec. Therefore, this commit forces Travis-CI to generate testing assets before running RSpec in order to generate the third party assets required to run the application.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request adds support for Webpack into the web application and uses it to serve all third party dependencies. Additionally, all the application JS files have been rewritten to drop jQuery.
PR #50 added support for Yarn, added in Rails 5.1, and used it to fetch third party dependencies: Bootstrap, jQuery and Cookie Consent. However, those assets were still digested by Sprockets. This worked almost fine, but recently a regression was found: Sprockets did not digest the glyphicons used by the dashboard and the application rendered boxes instead.
This pull requests fixes that regression because Bootstrap, jQuery, Cookie Consent and Rails UJS are now being fetched by Yarn but they are precompiled using Webpack, added to the project through the webpacker gem. Sprockets is still being used to digest the application (first-party) JS and CSS sources.
During this process, it was found that jQuery was causing some concurrent dependency issues with the application sources (app/assets/javascripts/**/*.js) that used jQuery, because they were being parsed before jQuery was fully loaded, thus causing issues such as jQuery is not defined. Instead of looking for a solution to make the Sprockets assets waiting for the Webpack assets to be fully loaded, given that this web application has so little JS code at this moment, the decision was made to drop jQuery from the application sources. This means that app/assets/**/*.js are now vanilla JS files that uses native ES5 functions.