Does any performance maniac here have an opinion about requirejs, browserify and webpack

I've been playing with requirejs and its not too difficult but the r.js optimizer seems to be perhaps not ideal. One thing that looks pretty awesome about webpack and browserify CLI optimizers is that they parse through your code to find require statements and then automagically create the bundle.js for you. I've been looking at browserify and that lead be to the next supposed best thing called webpack. It looks pretty awesome and (in the browser) with a simple 'coffee!' prefix on the nodejs style require statement the browser will automatically convert the coffeescript in the loader. Also it is possible to define .coffeescript as something to look for. I'll need to look at that more closely. Regardless Volt on the index.php would be pretty useful here for defining special options in the DEVEL environment. I think that Volt will have a very nice role in my Angular environment.

Does anyone here have an opinion about requirejs, browserify and webpack?

Also something that I'm looking at is Gulp for automation instead of Grunt.



41.6k
edited Apr '14

Wow, only posted this two days ago. It seems like forever. Well I went full into webpack and after a day and a half I was "flipping tables" and just having a bitch of a time with it. Then I went to browserify and it just wouldn't work as it was crashing with an exception. So I went back to webpack with determination and I whined on the github project and a few people provided me with much needed configuration files. It is incredibly rare to find these for that project as apparently everyone but me is just born with that understanding. At any rate it is coming along nicely and the build environment is pretty awesome actually. I'm using commonjs/node style require('module') at the top of the module code and it is doing all of this magical stuff to wrap it up in the browser as a single bundle.js or in fragments (that I will pursue shortly). Best yet is that it efficiently inline/wraps the CSS up as well into the bundle.js (, if that is what you want to but I think that it is magic with angular modules). The output code is easy to read and it optimizes as well with a single option. Its pretty unreal and awesome actually. So I'll be releasing this scaffold with so many goodies that it surely will be the goto scaffold for a rich phalcon application. In addition it currently supports a mix and match of; .js, .coffee, .css, .scss, .less and .styl. I'll be making the scaffold in a way that will walk people through the node/npm system as it is a really different world. This scaffod will have all of the cool words like; coffeescript, phalcon, volt, angular, npm, bower, websocket, etc.

The development environment will offer two options; one to load the bundle.js directly and another to go through the webpack-dev-server (over a different port) that has the advantage that it waits until the changes have been compiled before sending it. This will make development easier as it will not be necessary to wait on the console to see if it has completed before refreshing. You will be able to refresh and the script tag will wait on the webpack-dev-server. This will all be configured from options fed into Volt template. So Volt does have a role to play in phalcon. I've decided to keep the default Volt syntax and to instead use a ng() function for angular {} as most Angular index.html fragments will be stored in the public space. Volt will be used for setup and lower tech pages. I don't expect a Volt page to use the ng() function many times as it would only be used for values that you want the user to see regardless of their javascript settings or in situations when you want the value to be visible immediately without a flicker. So not often. In this way the scaffold will come setup in a compatible way for people who want to rip out the angular portion of the system. I'm sure and positive that the webpack build environment is superior so people might just want to use that with the Ulogin authentication system (with optional dual factor) that will be included.



41.6k
edited Apr '14

I have the webpack build environment fully configured and with the paths that I want. I've been pushing webpack to some limits since it is a critical component. I have been able to successfully create two distinct entry points with their own bundle and then I contrived a scenario in which jquery was bundled into an optional bundle/chunk file that would be downloaded asychronously. So a very large project would be able to break out components into download on demand features. These chunks would contain HTML, CSS and javascript for that module. If you don't like the idea of in particularly bundling HTML and CSS then don't use it or hard link to files off of the public webspace. If you use single quotes in your HTML attributes then it is pretty efficient actually since it is wrapped in double quotes. So far I have automatic inclusion of SCSS, LESS, Stylus, HTML, Jade, JS and Coffeescript all working. I will be delivering code that is setup using all of the hipster tech but you can simply change each file to whatever format you want and then change its extension and it will be exactly the same in the bundle. It even supports JS Harmony script so you can write in that as well.

I've decided that I'm going to include a Zephir Hello World feature in the scaffold so that people can see if it is compiled, installed and working.

I've had to innovate just a bit in the directory structure of the project since I've never been able to find a real world example of a full stack that is setup for PHP compiling or obfuscation. Additionally many Angular scaffolds call the front end folder "app" while I'm thinking of everything both serverside and frontside that is not compiled/bundled/obfuscated to be the app. Also I want to make the main app folder be entirely original source code and to have all of the stuff that comes out of it be stored in the "dist" folder. This dist folder would be snipped off from the project folder, renamed and deployed to a web server by pointing it to its public subfolder.

Right now I'm moving onto building Grunt and Gulp automation environments from the webpack.config.js that I've labored over. This looks easy enough from the examples and it might just be a gedit copy paste there if I'm lucky. I'll setup both since I feel that I need to learn both since although Gulp is said to be far better Grunt is still pretty huge in the industry. Then next comes learning the Karma and Jasmine testing environments and then hopefully not finding the new-new thing after using it for days. I can say that my initial impression of all of these scaffolds with bower and npm dependencies was "You mean I'm forever tied to ALL OF THIS SHIT!?!" so hopefully I'll be able to address that uneasiness to fear since I've just recently gone through it and this is primarily directed at the phalcon camp who like me probably is not up on all of the nodejs craze.