Structuring bigger app - use rootElements or named outlets?

Design
1

Hi, I am still trying to get over the steeper curve of Ember and I currently dont know how should I structure bigger apps. I think there are two way.

  1. rootElements > more Apps

do not define whole body as an application template and insted make div for notifications, div for sidebar, div for content and use those divs as rootElements in multiple Apps 2. named outlets > one App, more controllers

Make whole body as Application template with more named outlets. So I whould have ony one App and more stuffs in controller (and/or render views into those outlets/divs)

So this is where I am currently stuck in… (beisdes trying to experimenting with views that I found a bit tricky)

many thanks!

2

What about regular outlets?

You definitely don’t need multiple applications, that is totally overkill. Just understanding routing and using normal outlets should get you where you need.

Here’s a post to read about routing: Ember Routing: The When and Why of Nesting | Hashrocket

3

Thanks for comment! Article is good, but it covers just routers basics. My problem is more complex:

Assume I have some backend main page (like example.com/admin).

Page is consisting of:

  • Top navbar that holds project name and info about currently logged user (with some submenu on hover - like logout) and some search box
  • first thin sidebar on the left with icons for modules (dashboard, users, files…)
  • then there is “content” but that content can be:
  • just content
  • content with one more sidebar

Use case

Lets say user is on Dashboard. The setup will be as following:

  • navbar and thin sidebar with modules (just the same all the time)
  • rest is content with some stats, logs etc…

User navigates to users modules (example.com/admin/users - this is not ember route):

  • navbar and thin sidebar with modules (just the same all the time)
  • content is made of two parts:
  • sidebar with list of users
  • rest of content is filled with user info

what can change here? what I need to be able to navigate and show? eg:

  • by clicking on different user in the sidebar change the rest of content and display proper info
  • by clicking on edit to show editing form
  • switch sidebar with list of users to list of groups
  • and some shared stuff - display notification when user is saved (notifications should be made globaly)

How I thought I should solve it?

having following html:

<body>

<div class="notifications"></div>

<div class="navbar">project, user info</div>

<aside class="modules">list of avalible modules</aside>

<div class="page">

...<aside class="sidebar">optional. sometimes will be shown, sometimes not (list of users, groups, folders...</aside>

...<div class="content">user detail, list of files...</div>

</div>

</body>

  • notifications driven by view
  • navbar driven by controller? but I cant have a controller outside app root element. can’nt I? So driven by app
  • Page managed by App with templates on content and a view on sidebar?

Second thought was on making whole body an app and then have {{outlet ‘sidebar’}}, {{outlet 'content}}, notifications outlet(?) and so on…

I did some little Ember app but on this I guess I would need someone to chat with a bit to dsscuss it :- ( how to structure some bigger app. For simple apps it is quite straightforward, but for this…

many many thanks!

I will give anything to someone that will help me with those “basics”…

4

That post is exactly what needs to be understood first to make a ambitious application.

I recommend you also look at the render helper, which takes and renders a view with it’s controller and an optional model in any location. This could be used for your top bar and sidebars. Or, if your top bar and thin sidebar are always in view, then they could just be specified in the application template, with the content rendering in the {{outlet}} which would be placed where the content goes.

From there you can use render and appropriate nesting to get the content structured :smile:.

You can also look at these views: CollectionView, ContainerView, and the Component.
That should get you started.