I have many javascripts files (using requirejs) which I want to combine.
There are many asset manangements apps and it is hard to know which tool is right one for me.
For instance, I'm not sure how I could use django-pipeline to combine javascripts files since
I have require(['some-dependency'], function(dependency) {
instead of <script type="text/javascript" src="somefile.js"></script>
I suspect that django-require is able to optimize requirejs-using javascripts since django-require states that it optimizes using requriejs.
But it's hard to know how to do it from their doc.
I had similar problems with combining different Django apps for more complex frontend tasks. I ended up using Grunt and Bower along side Django and don't regret that at all.
I actually gave a talk on this a week ago at Django Stockholm meet up, the slides are available here to get you started:
https://volumental-public-downloads.s3.amazonaws.com/django_and_a_modern_frontend_django_meetup_2014.pdf
To use Grunt to run your requirejs build you would use the Grunt plugin: https://www.npmjs.org/package/grunt-contrib-requirejs
I found this to be a good resource to set everything up for requirejs and grunt:
Working project structure that uses grunt.js to combine JavaScript files using RequireJS?
Best of luck!
Related
I am working on an app that uses Django + Dojo. I want the UX to have awesome fonts, bootswatch kind of themes for example https://bootswatch.com/3/cosmo/
The entire app is going to be written in python and want to understand how I can ensure I get the modern look interface rather than the arcane Microsoft UI like feel some of the older dojo widgets spit out.
I finally decided not to go with Dojo which was too heavyweight to upload into AppEngine and dependencies it pulls 7K+ files.
Instead I donwloaded a bootstrap template, css, javascript etc, and blended that with a plan django and it works awesome!
I have posted a sample of how I did this if you are curious.
https://github.com/suramakr/django-playground/tree/master/locallibrary
I use both webpack and django. Now I move bundled assets to /static/ directory of django each time, so I'd like to make more effective process.
I read some articles and many people recommend to use django-webpack-loader, but I don't fully understand what it does.
I've already read the official documents below.
https://owais.lone.pw/blog/webpack-plus-reactjs-and-django/
https://406.ch/writing/our-approach-to-configuring-django-webpack-and-manifeststaticfilesstorage/
I think it's for collecting bundled assets located outside of django projects, but it seems almost same as creating a symbolic link from django project to dist/ directory in webpack.
Is there any other useful feature in django-webpack-loader?
It's a handy little tool. This gist of webpack loader is create a mechanism to link up to your latest bundle in an automated fashion.
A "render_bundle" template tag is provided that outputs link to load in either your latest JS or CSS bundle.
The tag is based from a hash of the bundle code (so this will change if your bundle changes) therefore browsers will always load in the most up-to-date version of your static assets. This cache-busting technique is useful when testing on mobile devices or situations where performing a 'hard' refresh of the page is not straightforward.
I believe this is achieved by the template tag referring to the output of BundleTracker, which outputs metadata about the status of your webpack bundle in webpack-stats.json.
https://www.npmjs.com/package/webpack-bundle-tracker
I think you might be missing that webpack will append a random hash code (so new builds bust caches). Without some special logic, django won't know how to account for the hash.
In my opinion all the other stuff the other answerer mentioned are sort of extra bonuses to make your life easier.
I'm trying to implement something with the rails asset pipeline that is proving harder than I'd hoped.
In order to structure the app cleanly, I plan to use a module system for the javascript. For this I want to use CommonJS modules, but I'd like to write them using the new ES6 syntax for future compatibility.
I've found the ES6 module transpiler extension for the asset pipeline, which works well, but this only converts it into the CommonJS format. I still need to get this into JS that the browser understands. For that I'm looking at using Browserify but my problem lies in combining these 2.
The module transpiler works in a per file basis, but browserify works by checking all of the files needed. The problem is that browserify can't use the original files as they're no in CommonJS format, they're in ES6, so it needs the transpiled versions, but because that happens in the pipeline, I can't point browserify at a file.
Are there any ways around this?
You might want to try Seth Vincent's approach, where he uses package.json, and npm scripts to run all JavaScript tasks, and only uses bundle.js in the asset pipeline. You could then shell out to npm tasks from your Rakefile. I like his approach because it opens up the modern JS tool chain for JS tasks.
My recommendation is to use the browserify-rails gem. For ES6, you would use a transform such as this one: https://github.com/thlorenz/es6ify
Update some months later: I still recommend the same path but if you can get off of the asset pipeline, I highly recommend going to webpack or browserify directly. The asset pipeline has some benefits but in my experience, trying to make JavaScript a first-class citizen is painful with it and the benefits outweigh the drawbacks (for me).
I'm trying to optimize my company's application.
Tha architecture at this time is composed of different folders (inside common folder) for different sections of the app (for example Managing Bills, Managing Canteen, Managing Events etc etc).
Every js and css are included in the first page of the application (login.html) because I'm using the simple page template of jQuery Mobile.
Now I'm considering to add some other components to make the app easier to mantain and maybe speed it a bit.
What do you think about:
RequireJS to divide each section in a module so i can load only the javascript of a particular module at run-time instead of loading within login.html
Inline #imports for CSS files to produce single composite CSS
uglify.js to Minimize file sizes
Handlebars.js to realize fragments of html reusable
Do you think is a good way of work for an application that will become greater by adding new sections?
Do you think of other tools?
Thank you
This is a very broad question. I think you're on the right track... I'll list some libraries that could be worth trying:
Require.js - Will give you the ability to have 'modules' and dynamically determine and load dependancies. Alternatively some people prefer patterns such as the Revealing Module Pattern, jQuery Plugin Style or Common JS style modules. For what it's worth I recommend Require.js.
Bower is a package manager, you can use it to bower install [package]. They have a lot of packages here and you can also link it to your own repo. This could be helpful for managing dependancies.
Uglify.js and Google Closure Compiler are both good for minifying your code. Remember that some minification configurations such as advance mode could break your code. Run tests against the minified version of your source code.
QUnit is good for doing JavaScript unit tests. There are many other alternatives like Jasmine, which is what the Cordova guys use.
Lodash is another (faster) implementation of underscore.js that will provide a lot of utility methods for working wit arrays, objects, functions, etc. It also includes templating support. There's a good talk by the author here.
There a MV* JavaScript frameworks that could help more than jQuery (DOM+AJAX+Animations) or jQuery Mobile (Mostly UI) such as: Dojo, AngularJS, Backbone and Ember.js.
For UI you may want to checkout Adobe's topcoat repository and website. There's also Twitter Bootstrap and Foundation which allow you do to responsive design out of the box. If you're set on jQuery Mobile I personally like this Flat theme.
JSDoc and YUIDoc are good alternatives for documenting your JavaScript code.
I have no idea how many of those tools will interact inside Worklight Applications. It should be fine, since Worklight doesn't impose a certain set of JavaScript libraries you have to use. However, I haven't personally tried most of them inside Worklight Applications.
Ember don't seems to play well with requirejs or building with r.js without some hackery.
Bit hard to manage a large application, I like to break down my file structure as HMVC, which manages modules bit easier :
app
- blah
- modules
-module1
- controller
- model
- view.
Has anyone come up a build stack to automate the compilation into single file with dependency management?
Update: You should now be starting new projects using ember-cli, which provides all the build/dev tools plus many other useful features.
Original answer:
An example Ember project using grunt.js as a build system:
https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
I've used this as a starting point for some Ember apps and it works well.
Ember don't seems to play well with requirejs or building with r.js without some hackery.
Why do you want to use require.js in the first place?
As for making this all work you'll need a build tool. I recommend brunch (Node) or iridium (Ruby). Brunch is more simple and supports many different module formats. Iridium is much more powerful. It uses Minispade for modules. Require.js/AMD is not needed because your js is always delivered as a single concatenated file.
For stand-alone ember dev I use ember-skeleton as a starting point, which is itself based primarily on rake-pipeline.
https://github.com/interline/ember-skeleton
This provides the whole kit-and-kaboodle for beginning an app, but the meat of it is the rake-p Assetfile, which describes how rake-pipeline will digest all the files, filter their contents, and ultimately combine them into the final handful of files. Additionally, the combination of loader.js and the minispade filter allows the use of 'require()' statements for managing dependencies amongst your files.