Converting an admin to components



I’m wondering if their is a tutorial on how to convert an admin UI into Ember components? What are the best practices? For example, the following UI framework:

Has a main navigation, two sidebar menus, a content body and a footer. What would the best approach be to converting this into components? My initial thoughts, with very little Ember experience and based on the scattering of documents I’ve been able to find, I get the sense that creating unique components for everything would be the best approach. By everything I mean, everything that is unique. For example, if we take the navigation bar, there would be a parent component for the navigation as a whole and then child components for the sidebar collapse/expand buttons, the search, the drop down menus, notification indicator, etc. There would also be additional parent components for the right hand sidebar, left hand sidebar, and footer.

Looking at one of the sidebars, for example the left one, could that be one component or would child components be required here as well?

The right hand sidebar is more complex with tabs. In this example, would it make sense to break this sidebar into child components for the 3 different tabs? Would you want to go as far as a unique component for different elements of the tabs themselves. For example, each notification type would be a component?

Thank you in advance for your assistance send I look forward to understanding how best to handle this type of scenario.




Everything you described above sounds like a good idea. Oftentimes the way I’ve started prototyping is to just copy the HTML over into a template and then start to think about what I need to be dynamic. But what you are hoping to share with other pages also can be a component (will I reuse this button? Component)

I’d suggest diving in and iterating as you go :wink: