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.
Related
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 would like to know what is included in a process of building web-application with ember build, as I know that JavaScript is interpreted language and does not require compilation (unlike Java or C++).
You are right that JavaScript is interpreted and not compiled language. You also most probably know that in web-development we use <script> tags to include JavaScript code into html pages. But at some point web-application grows so big that developer needs to break js code into few files. That's not a problem - we can have 2 or 3 or 5 script tags. However for bigger apps, for which we need frameworks like ember, we need to break code into tens or even hundreds of files. But having tens of script tags on page is different thing than having 2-3 - large amount of external resources slows down page load process. That's a first problem. It means that developers need a tool to at least concatenate all files into one.
Other problem - our js code is pretty formatted. But formatting means a lot of extra bytes - spaces/tabs, new lines, long variable names. And all that extra bytes slow down page load, too. To solve this problem other tools were invented - uglyfiers, which take formatted code and strip all those extra bytes.
Next, it's more convenient not to just concatenate all js files in correct order but to have some module system to isolate code in each module and then require that module in any other. But then concatenate all that in one file and uglify it.
And have you ever heard about es6? It's a new, better js standard but it's still not supported by all browsers. To use its features you need a tool that will convert (transpile) es6 code to es5 (which is supported everywhere). That tool is called "babel".
Also, sometimes developers need to manage non-js assets, like css or images - concatenate styles, move images around.
Building is a process of running all these tasks to convert a lot of pretty source files into one ugly but effective. Ember-cli is a toolset to do all that things and ember build runs all needed tasks to build web-application. Some other frameworks may have their own toolset and if you don't use any framework, tools like gulp and webpack exist which are framework-agnostic and help to create your own build process.
I hope I answered your question. In fact, ember-cli does more work than I described, you can find more features and details at ember-cli.com.
I'm creating a bunch of themes by passing variables into ember-cli. Is there some reasonable way for me to configure Ember to only do the CSS build?
Is there a reason you need ember-cli if you are just building out the css? Couldn't you build out the themes with Sass or Less or PostCSS? Perhaps I'm not fully understanding the entire use case here but if you're just trying to compile styles, one of these tools may be of better use. If you must stay inside Ember, you can leverage addons like ember-cli-sass to make this process much easier.
We are currently using requirejs/backbone for development and firebug for debugging. We are thinking of moving to Ember and using ember appkit.
I noticed that because of the new ES6 javascript modules, the application needs to be pre-compiled into a single javascript file app.js.
I am concerned that this will make it difficult to debug problems because you are dealing with a massive single file instead of small ones that we have at the moment and can easily find in firebug.
Has this been an issue for people, are there any good solutions?
As kingpin2k mentions, Ember App Kit has been effectively superseded by Ember-CLI. I would recommend looking into that. Depending on your needs and planning, Ember-CLI may or may not be suitable for your situation. Some people have successfully put Ember-CLI apps in production, but this is brand new technology, so caveat emptor.
Ember-CLI provides a build system based on Broccoli that will transpile ES6-modules, compact the output into a single Javascript file, and lots more. Ember-CLI is still under heavy development, but is already shaping up quite nicely. In my opinion, the clean code organization and fast Broccoli build are really quite awesome.
Modern browsers such as Firefox and Chrome come with an integrated debugger that will show you the original source when source maps are supplied. This will eventually be provided to the browser in Ember-CLI projects as well when you run the development server. However, this functionality is currently incomplete. It is possible to get some source map support in Ember-CLI now, have a look at this issue.
In the mean time, there are more ways to debug code of course, and I suspect that before proper source map support lands in Ember-CLI/Broccoli, liberal use of console logging and such may be sufficient. Running Ember-CLI's live-reload development server means that when you change and save a file in your project, the results will be shown almost instantaneously in the browser; the Broccoli build is blazing fast.
Keep in mind that minifying and combining all Javascript code into a single output file is a common approach in single page application frameworks such as Ember, Angular, and Backbone. Debugging these applications with breakpoints and such will happen more and more through the browser's debug tools in combination with source maps.
Update
By now the Ember core team actively recommends Ember-CLI. It is quite awesome.
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.