I'm wrapping up my Ember application and I want to figure out the best practice for handling the public site (/, /about, /faq, etc). Ideally the Ember JS and the majority of the app itself wouldn't be loaded.
There are a couple options, but I'd like to know the best practice.
Option 1 - Part of the app
Just make the public pages templates within ember-cli.
Pros:
Same asset pipeline
Single delivery of your entire site
Cons:
How do you have two base templates? One for the public site and one for the app itself. Ideally I'd be able to have different nav bars for each part. Everything inherits from the application.hbs template but I don't want to put conditionals in there to handle the two nav bars. I also don't want to overwrite every other page in my app to put it under a different template (/app/*).
The entire app would be loaded the first time the user goes to the page (only gets slower as the app gets bigger).
Option 2 - Part of the public folder
Create static HTML in the /public folder.
Pros:
Same asset pipeline
Single delivery of your entire site
Not loading the entire app for public pages
Cons:
You have the write the entire HTML for every page. This doesn't allow for quick development.
No template system. As the public site grows it's best to have a template so you can easily change the nav bar on all pages.
Not sure how to handle / since ember-cli wants to handle that url, but I'd want it to be apart of the public site.
Adds a lot of junk to your public folder since you'd need to add about/index.html for good urls.
Option 3 - Separate from the ember-cli project/app
Create a nanoc site or some other statically generated site and deliver it for your public pages.
Pros:
Have properly layouts for public site
Separation of assets
Not loading the entire app for public pages
Cons:
Need to figure out how to properly deploy separate apps on the same domain (putting ember-cli under /a/ is easy, but if I deploy to heroku how do I serve up multiple heroku apps on the same domain?).
How should /sign-up and /sign-in be handled? Public site with public site chrome, or web app with a signed out state (not ideal).
I would go with first opinion. About your questions about two base templates > you can hack it in router to show exactly what you want.
Here's the link about similar issue: https://stackoverflow.com/a/14231712/4560056
Separate.
Use your .htacess file or whatever the equivalent configuration mechanism is for your server setup to control when your app should have responsibility for serving content and when it should not.
Related
The tutorials and example I've seen are all single page application.
Can anyone give an idea or point to a resource showing how a multiple page app can be developed with CanJS?
You should be able to create a new page in whatever app framework you are using or even just static pages, and then hookup your new control and view to any element on that new page.
You want to have a separate control for each module, so you might have separate controls even on a single page if you have, for example, a filterable dropdown list, a todo list, and a login. So, in your canjs directory for your app you will have separate sub-directories for each module which will contain your control, view/s, model/s, and observe/s and unit tests. This makes them re-usable, easier to test, and since they are modular if one part of your app breaks it won't take down all functionality. Once you get the hang of that incorporate AMD style loading of your assets with stealJS which is made by Bitovi - the CanJS creators.
https://github.com/bitovi/steal
If you want to manipulate the location.hash without actually changing pages or manaage browser history and client state you should check out can.route:
http://canjs.com/docs/can.route.html
I would like to include static content as part of my normal rails views e.g. marketing content which can be text or images or both.
I would want marketing content to be separate from my rails code so that it can be separately updated.
I do not want to use content management systems.
Oh and I cannot not use DB, its an api driven app.
Is there a proper rails way of achieving this?
Update:
sorry for not being clear. I can probably explain it better with an example: I need to place some images/text on my login screen that are not part of my apps source code. That live some where on the server that can be updated async without going through my apps revision control system so they cannot be in the public folder of my app
You can put your static marketing content in the public folder of your rails app. Your question is a little unclear and so I'm assuming you are creating a rails app to do api stuff and then have static marketing content/website.
I am developing a site that can be broken down to a handful of main pages. These pages can be thought as isolated from each other, except they share the session data (ie. session id and logged-in username).
Initially, I was gonna build the site as a SPA using ng-view (ie. make the pages into AngularJS views). But then, I don't see any benefits for my site to be implemented in that way. And it would require extra time and efforts to make it support SEO (Making AJAX Applications Crawlable).
Going with an approach that does not provide any benefits and even creates extra workload doesn't seem to be too smart. So I thought to myself, why don't I make the main pages of my site into individual AngularJS apps. The parts of the site that need to be indexed by search engines are simply the initial screens of some of those apps, so I wouldn't need to do extra work for SEO. (Note: The initial screens are rendered by the Django server with data for search engines to crawl, so they are non-blank.)
For each of the apps, it may or may not have its own set of partials, depending on the requirements on it.
Example:
mydomain.com/item_page/1234 (load "item" app)
mydomain.com/dashboard (load "dashboard" app)
mydomain.com/account (load "account" app and default to "tab_1" view)
mydomain.com/account#tab_1 (load "tab_1" view of "account" app)
mydomain.com/account#tab_2 (load "tab_2" view of "account" app)
mydomain.com/post_item (load "post" app)
This is solely my random thought and I haven't seen any AngularJS examples that are comprised of multiple AngularJS apps. I would like to know:
Is the multiple-AngularJS-apps for one site approach feasible? What are some caveats that I should be aware of? Are there any example site out there in the wild that's taking this approach?
If feasible, how do I share the session data between the apps?
Note this post is about multiple AngularJS apps for one site, not multiple AngularJS apps on the same page.
There is nothing wrong with such approach, as long as you keep the size of downloaded JS script small enough, and ensure good caching. One of examples of such applications can be GitHub (they are not using angular, but approach is the same). When you go Issues page on GitHub, it loads an html page, common Github JS libraries and page specific JS code. Navigation and actions inside page, are handled by that single page specific script. If you go to other section (like Code) a new page with new page specific JS code will be loaded. Another example is Amazon AWS console, they even use different frameworks for different pages. (both GitHub and Amazon don't use Angular, but this approach works for any JS based framework, even for GWT).
As for sharing some session data between pages, you can embed this info directly in the page itself, using inline scripts or hidden elements. E.g. when your server is generating page, it should also generate some session information into the page. Another approach is to download session data once, and store them in local storage/session storage.
We are trying to create a portal type application with multiple / independent "sub-apps". Assuming that all sub-apps are written in Angular what is a good pattern to achieve the following goals.
Each app can be developed and deployed independent of each other.
They share a common authentication service, they can share common libraries (directives, filters etc).
Only one app will be visible and active at any given time. The scope of each sub-app is isolated from each other.
When the users goes between the sub-apps, the state is maintained as long as the user does not refresh the page or visit another static link. (I think this is built into Angular and no special effort maybe needed)
Each sub-app will have more than one views (it will have its own menu). There will be a top menu based on what sub-apps are available. Ideally the top menu is dynamically build based on what sub-apps are deployed. Maybe there is a server side component to this (the server detects the folder structure etc and determines what apps are deployed and injects the necessary js code into the page).
Given the fact that AngularJs does not have multi-level view structure, I was thinking of using multiple ng-app declarations on different divs and then using $window scope to store the key of the active app and hide the ones which are not active.
There is no easy answer to your (rather open) question, but regarding the $route and ngView limitations, I have been having great success employing a technique derived from this: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
This is something that I also have been thinking of trying to implement. While I don't have a complete working solution, I believe that this type of portal app would consist of multiple angular apps on the same page.
The portal app would be the traditional ng-app directive on the main page and the "portlets" would be dynamically created and manually bootstrapped angular apps on a sub view div. You can share data, state, authentication, personalization, etc from injecting the portal services (contained in their own module) that provide these features into the manually bootstrapped portlet apps.
The tricky part is how the portal app would discover the portlet apps and serve up their angular modules knowing that these apps would be independently deployed web apps with their own urls.
I still have some questions around if the service data would be common between the apps or if you would need to try and leverage HTML5 local storage via the portal service (like a data manager).
I come from a background of coding my client website projects from scratch with MySQL and PHP. They are typically public facing sites with a mixture of static content, dynamic content plus a little functionality here and there (i.e. account, searching etc). Nothing too heavy.
So I generally code up a little CMS site to let them update what they need to, put it in a protected folder and that's that.
Now I'd like to use CodeIgniter and more of a MVC approach for my next site. Should I be doing anything to separate the CMS out from the rest of the site or is it simply another area (with its own controllers/models etc) and extra authentication?
There are several good methods to create an admin interface in CodeIgniter described at:
http://philsturgeon.co.uk/news/2009/07/Create-an-Admin-panel-with-CodeIgniter
You probably will want to look mostly at "#2" on his list; it's lightweight and not much additional work.
The CMS is part of the site, if by CMS you mean administration panel / backend of your application, you can use the above link provided by coreylink as it details different ways to create an admin panel.
My personal preference is to create a folder called 'admin' in my controllers directory and create semantically meaningful names so my urls are webapp.com/admin/users and so on.