Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bundle pump.js with Browserify #1539

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Bundle pump.js with Browserify #1539

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions lib/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ var urlparse = require("url").parse,
api = require("../routes/api"),
web = require("../routes/web"),
shared = require("../routes/shared"),
bundles = require("../routes/bundles"),
webfinger = require("../routes/webfinger"),
clientreg = require("../routes/clientreg"),
oauth = require("../routes/oauth"),
Expand Down Expand Up @@ -408,6 +409,10 @@ var makeApp = function(configBase, callback) {
hsts: config.hsts
}));

// This is done up here, instead of down there with the rest of the *.addRoutes(),
// because it has to override express.static()
bundles.addRoutes(app);

app.use(express.static(path.resolve(__dirname, "../public")));

// Default is in public/images/favicon.ico
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.15.2",
"browserify-middleware": "^8.1.0",
"bunyan": "^1.8.12",
"compression": "^1.6.2",
"connect-auth-pumpio": "^0.6.1",
Expand Down
7 changes: 7 additions & 0 deletions public/javascript/pump.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -688,3 +688,10 @@ if (!window.Pump) {
};

})(window._, window.$, window.Backbone, window.Pump);

// XXX refactor these into *real* modules instead of just blindly including them
require("./pump/auth.js");
require("./pump/model.js");
require("./pump/router.js");
require("./pump/socket.js");
require("./pump/view.js");
5 changes: 0 additions & 5 deletions public/template/layout.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,11 +116,6 @@ html(lang="en")
script(src="/javascript/libs/bootstrap-lightbox.min.js")
script(src="/shared/jade-runtime.js")
script(src="/javascript/pump.js")
script(src="/javascript/pump/auth.js")
script(src="/javascript/pump/model.js")
script(src="/javascript/pump/router.js")
script(src="/javascript/pump/socket.js")
script(src="/javascript/pump/view.js")

each script in config.scripts
script(src="#{script}")
Expand Down
28 changes: 28 additions & 0 deletions routes/bundles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// bundles.js
//
// Serve up some sweet Browserify bundles
//
// Copyright 2018 AJ Jordan <alex@strugee.net>
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

"use strict";

var browserify = require("browserify-middleware"),
path = require("path");

var addRoutes = function(app) {
app.get("/javascript/pump.js", browserify(path.join(__dirname, "../public/javascript/pump.js")));
Copy link

@ghost ghost Mar 15, 2018 •
edited by ghost

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think is good idea minified and make a bundle, but is not a good idea for performance make this from the server, you can make the bundle from CLI (with browserify and watchify) in build scripts, also we don's use the commonJs on the client side (dependencies, imports etc) so Browserify adds unnecessary extra code for that.

If the idea is to convert the client side to a commonJs structure I think webpack is more powerful because you can make lazyLoad and other advantages.

Also, you can make the bundle only with UglifyJS2 from CLI without extra code and add some watch task for the development process.

Also, I think is better keep independent the frontEnd process like create bundles, for that reason I closed #1350 also for performance reasons and is similar to browserify-middleware

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also we don's use the commonJs on the client side (dependencies, imports etc) so Browserify adds unnecessary extra code for that

Right, the plan was to switch to using CommonJS since it just makes it so much easier to structure the code. Really not even "easier", but "possible at all".

Re: WebPack, I thought about it, but I like Browserify better for its flexibility and I tend to agree with this assessment by @substack (the author):

I think that longer-term, separability has more benefits from a maintenance and experimentation perspective, but that doesn't mean that you can't do pretty much everything webpack can do in the browserify ecosystem. It just means that there might be several different ways of doing that task to serve different use-cases. Diversity is good!. Diversity means that you can choose an approach that more closely matches the trade-offs that you need, but you might need to put in more work to evaluate the different options.

Also WebPack is famous for having complicated, hard-to-debug/patch/etc. config files.

Also, I think is better keep independent the frontEnd process like create bundles, for that reason I closed #1350 also for performance reasons and is similar to browserify-middleware

That's funny, since that was opened I actually have changed my mind on it and I think caching in memory is probably better, both for contributor experience and for production. Serving from memory is faster and you don't have to rebuild in development. FWIW that's what Express does with compiled templates.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was working with Browserify and is pretty cool, the last year work more with webpack and is powerful to manage alias, split by components, lazy load, minified styles, copy fonts/files, configuration by environment etc and webpack is more used right now and is like browserify + gulp.

but a think the browserify-middleware is unnecessary because you only need to make one bundle and you can make this from a CLI simple like:

  "build:js": "browserify -g uglifyify public/javascript/pump.js -o public/javascript/dist/pump.min.js",
  "watch:js": "watchify public/javascript/pump.js -o  public/javascript/dist/pump.js",

also if you will minify styles you should use gulp, webpack or scripts in package.json, so should be a unified solution.

Also with browserify-middleware if you precompile on startup you'll add some delay in the startup (for this reason I closed #1350) or from the response the first time would be slow and more when you add the external libs/modules as dependencies

};

exports.addRoutes = addRoutes;