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.
Related
I'm facing an issue when moving my less files to a pod structure outside the styles folder.
I'm trying to put i.e:
pods/user/register/style.less
pods/components/app-login/styles
and import them from my styles/app.less file.
but so far it just compiles for the first time, but does not watch for future changes. I tried to create a symlink inside my styles folder to pods folder but sometimes works and sometimes breaks broccoli compilation so I declined.
Do you have a better workaround for this? For the moment im going back to the old structure.
Do you need to use Less? The Ember core team may bet on Sass and incorporate https://github.com/ebryn/ember-component-css into the framework at some point in the future. Using that addon would provide you with everything you are after ...
We have a quite big application built on the version 1.8.1. We would like to migrate to version 2.0 or higher. We have a few guestions:
Does exist some step-by-step manual how to do it?
Can we use 2 different versions of ember in the same time? Because of continuous migration...
We would like to avoid overwriting of the whole application...
I would suggest you to update the ember. and keep deprecation warnings open. Then you can try investigating each warning one by one and update the code with the new syntax.
This guide can be very useful : Upgrade to ember 2.x step-by step
Since Ember uses global window scope, it will result in conflicts and its not advisable to use two versions of ember.
It's possible to load different Ember versions based on which route you are on, but I really don't recommend doing that, as you lose all the benefits of having a Single Page App (apps will load again when you transition between them), and you end up doing significantly more work for yourself, with more opportunities to screw up. I'd follow locks' advice and upgrade the app step by step, testing as you go.
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.
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.