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?
Related
I am a Django developer just getting started with adding React to one page of my app, and really enjoying it so far. (It's a normal Django app with a home page, an about page, etc, but also a "chart" page with an interactive chart, and I want to build the interactive part in React.)
The problem is that I've started with the downloadable React starter kit and I'm not sure how to do things the 'right' way, and it's complicated by using Django to serve my project (all the tutorials seem to assume you're using node, which I'm not).
Right now I just have this in my Django template:
<div id="myapp"></div>
<script src="/static/js/vendor/react.js"></script>
<script src="/static/js/vendor/JSXTransform.js"></script>
<script src="/static/js/myapp.js"></script>
And myapp.js has all the React code. I'm aware this isn't really the grown-up modern JS way of doing things.
Now I want to use React Bootstrap, but it seems that the only sensible way to do that is with npm. So it's time to make the switch, but I'm not completely sure how.
I have run npm install react and npm install react-bootstrap from inside my static/js directory in Django. This has created a node_modules folder with various files inside.
So three questions from a confused newbie:
Where should I put my React code to work with these npm modules (should I use var React = require('react')?
Do I need to compile this code somehow (using webpack?)
How do I then integrate this with Django? Should I compile it all to myapp.js and just include that in my HTML template?
I'm also doing the same thing right now - moving away from embedded HTML script tags into require land. Here is the tutorial I am following, and here is my file system so far. I am doing it in Node but it shouldn't be that different for a Django project as the React frontend code is decoupled from any backend other than API URL's.
Your node_modules folder contains react-bootstrap. In your myapp.js, use the require('react-bootstrap') to load up the library which is contained in your node_modules folder.
Where should I put my React code to work with these npm modules (should I use var React = require('react')?
You can put the code anywhere. If your file system looks like this:
project/
react/
myapp.js
node_modules/
react source code
react bootstrap stuff
Then you can just do var React = require('react'); in myapp.js.
Do I need to compile this code somehow (using webpack?)
Yes, I would consult the webpack tutorial I linked earlier, it should explain how to compile all your React code into a single bundle.js. Here is also another good tutorial. This bundle.js file contains all the source code of your requires. So if your myapp.js looks something like
var React = require('react');
var ReactBootstrap = require('react-bootstrap');
then the bundle.js now contains all of the React and react-bootstrap javascript code, along with the myapp.js source code.
How do I then integrate this with Django? Should I compile it all to myapp.js and just include that in my HTML template?
I've only done work on Nodejs, but my React code so far hasn't touched any Node code, and I don't think it will touch any Django code (again I've never done Django so I might be wrong). All you need to do is compile with webpack, which spits out a bundle.js. You put that bundle.js in your HTML and it'll load up myapp.js.
ReactJS code is still JS code. Even though you do require/import/other module based syntax when coding, in browser you will still load the JS code by a script tag.
The problem is how to let the script generated by webpack(bundle.js) to work with other 'VanillaJS' script. For example, if you only write an individual component using React, like a small table. And its data(props/state) will depend on another element/event written in VanillaJS, e.g, a click listener on a button render by django template. Then the question is, how they communicate with each other.
So far, the solution I know is:
when you write React Code, instead of calling ReactDOM.render explicitly with preset props/state, you can store that in a global function, the arguments could be the props. You load this script first, then the other script can use this global function to trigger the React render Component.
I'm using Django Rest Framework to build an API and then connect to that API from React (using simple Create react app), this way the front end and back end are separated and the application is very scalable. The second way to do this, is call create react app then run build and point your django settings to that react build, this way the front end is not separated from the backend. I hope this helped, good luck.
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.
We are writing Ember app which provides basic infrastructure for app building. Users can use this app and build there own Ember app by utilizing infrastructure provided by this app. This app provides basic utility services like Authorization, Authentication, layout, templates, reusable UI components, consistent look and feel, scaffolding, dependency stack etc. My question is,
How can users build there own Ember app utilizing these services and include it within this parent app, something like nested app, where parent app provides common services. Is it possible to include one Ember app within another Ember app? child app content should be shown in parent content window retaining all navigation links and layout.
There can also be a situation where multiple apps are included under parent app and each of these child app can be accessed using a router in parent app, example, if child1 and child2 apps are included under parent app, then navigating to "/childRoute1" of parent should open child1 in parent content window and navigating to "childRoute2" should open child2 in content window. Is this possible using Ember? if not how this can be achieved?
Thank in advance
This question is a bit vague, but I think what you want:
window.App = Ember.Application.create({
rootElement: '#ember-app'
});
Include that within the Ember.js Application definition to assign an Ember app to a specific div (in this case ember-app). This div can be within the jsp of another existing Ember.js application.
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
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