How to dynamically load directive in angularjs through json?

How do I strike the right balance between client side and server side code?

• I'm developing a site which will have a fairly extensive admin section. The front end is fairly simple, and doesn't need a complex UI at all, so I don't intend to have too much client side code there. I'm trying to figure out at this stage how much logic to place on the client side for the admin section. I'm using Ruby on Rails - as one extreme, I could generate the admin pages entirely server side and use extremely light client side code for some basic enhancements. At the other extreme, I could use a framework like AngularJS to make a single page application for the admin section, communicating with the server by JSON. The main disadvantage I see for the extreme client side approach is that there will be a significant initial page load time, and it'll feel heavy on mobile devices. The advantages I see are that it'll be far more responsive after the initial load, and that the application on the server will be purely an API, and easy to extend or use in other ways should the need arise. I saw this article - http://37signals.com/svn/posts/3112-how-basecamp-next-got-to-be-so-damn-fast-without-using-much-client-side-ui - about how basecamp manages to be fast and responsive with minimal client side code. While they talk about how they achieved their speed improvements, they don't mention their reasons for sticking with heavily server side code. So how do I settle on the right balance between client side and server side code? I'd really appreciate any insights into this, pros and cons I have not considered.

• Answer:

  I am not a expert on AngularJS but a Single Page Application doesn't have to load so much longer than a full backend generated system. To get a responsive SPA You have think on these things: 1) Which browsers should it support - if You try to target also IE6 users then probably make more on the backend. 2) Do You need that Google and other search engines can map Your application - do make it searchable You have to make duplicate system for the search engines where the backend will print out the textual content. 3) Map out which kind of UI components You need - going for a tool that can to a lot of things is usually slow and heavy. But also loading tens of different libraries can make the app slower. Lot of good libraries have the option to compose a custom library. Choose Your tools carefully and plan ahead. 4) Try to minimize code for production use 5) Load rarely used components dynamically - I do not know if AngularJS can do it but I use subpage specific libraries only if this page is choosen. This will make the main application smaller. 6) Make the API so that it easy for the SPA to display info. For example it is easier when the API returns a JSON object where keys are ID's to the subitem { "23": { "name": "John", "age": "19"}. That way it is easier to find certain objects from this list and also faster. Probably there are more things to think of but then this post will become too long. I have to say that I like SPA more because the user experience can be a lot better and later changing or adding new functionality can be easier.