Say I have a web app - a large, complex, rails app, like an accounting application. I see a use for several single page apps instead of the typical rails round tripping pages. For example, I can see a user better served with an intuitive single page/dynamic app for:
Creating Bank Reconciliation
Creating an Invoice
Filling out a Time Report
etc..
These are all distinct one page apps...
All the ember apps I see are single page and single purpose.
I want to have many single page apps, built with ember. How would that look with respect to:
Routes: I'd have a combination of server routes and client routes. How would that look in Ember? Serve different Ember applications, each with their own application router and routes?
Templates: Would all my "applets" get compiled and pushed down to the client on load? Or would I leverage require.js and load each single page app depending on if they're navigated to?
...
Can anyone help with those two questions?
Thanks in advance!
Routes: I'd have a combination of server routes and client routes. How would that look in Ember? Serve different Ember applications, each with their own application router and routes?
Depends on how much overlap there is in terms of features. For sure you could serve different Ember applications with their own router and routes. In that case you would probably also write a shared library with common base classes and mixins.
An alternative would be to have a single ember application that looks and behaves very differently depending on the route. That's where I would start until you have a good feel for ember and see a compelling reason to split things apart.
Templates: Would all my "applets" get compiled and pushed down to the client on load? Or would I leverage require.js and load each single page app depending on if they're navigated to? ...
Path of least resistance in rails is to use sprockets to compile and package your templates - once compiled they are just javascript. Typically a rails app will bundle all javascript into application.js and include that on load. An alternative would be to split application-specific code and templates into app1.js, app2.js, etc. and load each when the app is navigated to.
I would suggest using a PODS structure and then you can have routes like
/app1/
/route1
/route2
/app2/
/route1
/route2
etc...
If you generate with pods structure you folders e.g.
ember generate route app1\route1
you will end up with a good folder structure that you can split up later, something like:
/app
/pods/
/app1
/route1
route.js
controller.js
template.hbs
/route2
route.js
controller.js
template.hbs
/app2
/route1
route.js
controller.js
template.hbs
/route2
route.js
controller.js
template.hbs
Related
I am currently using ember 1.13. I have two apps which use emberjs. Now I am thinking of integrating these two apps by creating a new route in the first app and display specific route of the second app. Many suggested to use ember-engines,but they need ember 2.10 or higher.Since my application mostly depends on IE 8,I cannot migrate from ember 1.x.
So what should I do? Thanks in advance!!
Cheers!!!
So one approach that would work pre engines is to leverage an addon for the common routes. Your addon will define routes, controllers, and templates as usual with the addons directory. You will also want to define something like addons/utils/router-utils:
// assume we have a single route foo
export function addRoutes(router) {
router.route('foo');
}
router is the this value that ember provides when invoking Router.map. So, within your addon, to allow for "normal" feeling development, you'll want to use this addRoutes function within the dummy app router in tests/dummy/app/router.js:
import EmberRouter from '#ember/routing/router';
import config from './config/environment';
import { addRoutes } from 'addon-with-routes/utils/router-utils';
const Router = EmberRouter.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
addRoutes(this);
});
export default Router;
Note well, the above router.js file is what Ember 3.8 generates. Yours will most likely differ but the key point is that we invoke our addRoutes function with the anonymous Router.map this value to dynamically add our routes to the dummy app. See this twiddle for an example of adding routes to the router dynamically.
You can now run ember serve from within the addon project and test your routes. Acceptance tests run against the dummy app as well so you're not really constrained by this approach.
Now within your consuming app, you would do the same thing we did in the dummy app to add the routes. This approach, in general, though will require careful engineering to work effectively (a lot of the problems that ember engines solves must be solved by you in some way). Your addon will most likely have to expose a lot of configuration so that you can route outwards from the addon back into the consuming app which will not know about the routes in the consuming app. You'll have to avoid namespace collisions. Sounds fun though :)
I am having two different ember builds.
Lets say one is one is parent build and one is child.
Can I have a setup where I can use components from one app inside another app?
Example:
I have added the js,css and vendor js from both the projects in index.html.
<script src="../adap/emberapp-parent.js"></script>
<script src="../adap/emberapp-independent.js"></script>
...
My main usecase is, I have an parent ember app and I need to use components from another app, which is by itself an independent app.
Is this possible?
I want to do something very simple that I am a little surprised people are not talking about more. I would like to generate on my server my own index.html from the files that are created from building ember for production. I use ember for part of my application and so when a certain URL is hit, I would then like my ember app to take over. I have tried generating my own index.html by changing the flag storeConfigInMeta in ember-cli-build.js.
storeConfigInMeta: false
This gets rid of the ember app having its configuration stored in a meta tag but the app still does not work and gives the error,
Uncaught ReferenceError: define is not defined
I have the latest version of ember and I am building ember with the command,
ember build --env production
My server generated index.html looks identical accept for the integrity attributes set on the include js and css scripts. Is their anything I am missing about approaching ember this way? Should I not be trying to do this?
when a certain URL is hit, I would then like my ember app to take
over.
You need to configure app server to return index.html file for the certain URL.
Generally, it's not required you to create your own index.html.
May be you can check ember-islands addon to include Ember components anywhere on a server-rendered page.
I made a mistake. I was grabbing the production assets with a regular expression with my server and generating my index.html file with these assets in the wrong order. To anyone looking to do this, it is very possible and is more preferable in my opinion to using the generated index.html unless you are using ember for your entire site's routing. However do use the setting in ember-cli-build.js,
storeConfigInMeta: false
This will make it so your ember app stores it's settings in javascript instead of in a tag. This is required for generating your own index.html file.
I've done some example apps in Ember, and now I'm ready for using it in existing application. Its traditional web application (request-response, full reload and some ajax loaded content, no rest/api things)
So lets assume I've few page (urls) like
1 abc.com/home.php
2. abc.com/support.php ,
3. abc.com/support.php?call=meeting
and so on..
so is it possible to use just one url with ember app and rest leave as such untill its ready?
PS: I did try for support.php as this.route("support",{path:"/support.php"}) and have SupportController and support.hbs template but its not working. I'm not sure how to put it in jsfiddle.
Thanks
Include your ember app only on the page that needs it, so only on abc.com/support.php
As far as ember can see, when you go to abc.com/support.php you are on the index page (of the ember app), and you will need to use the index.hbs tempate.
i've red quite a of lot tuts and articles on ember.js and made some basic stuffs - some sanbox and test things, complete login screen with many outlets, actions, ajax and so on... but I am now facing one problem.
Ember.js is for "Single Page Application" and I did not found a way (yet?) how can I make and share basic functionality across more "ember apps"/parts?
I have some backend and then some modules (users, files, news,...) and each is made by classic:
App = Ember.Application.Create()
But I need to have some shared functionality and I dont want to repeat in at each app - I want to be able to show some notification - once from user app then from files app and so on. Or to have unified modal window, or function that check some things in background on server and push updates to notifications area that is running on each of those app parts...
How should I solve it? Is there any way of extending base App? or have to separates App on one page that communicates to each other? I've also read something about Ember namespaces but I am not sure if it is the right thing and how to user it :(
note: Each module (dashboard, users, files,...) is loaded as new page (complete html, new scripts,...), but module itself work as a SPA and on AJAX.
Ember.js has awesome documentation but real word example articles on how to use it are showing slowly and I had no lucky finding some tut/article on solving this problem in real world.
You can set another module and run it as another ember app in the same page, define the root element of the apps
var AppNotification = Ember.Application.create({
rootElement: '#notifications'
});
var AppUsers = Ember.Application.create({
rootElement: '#users'
});
So you need to associate the main apps to a div (#dashboard,#users,#files) and another div for the notifications.
I don't know if it it possible to communicate from one app to another, this is very advanced, but you can investigate ember instrumentation...http://emberjs.com/api/classes/Ember.Instrumentation.html
Good Luck
I just remembered (beer enligthment) other different way I've read months ago... load async code from the router JSBin example
You can have your notification js stuff and take the templates using this SO answer