I'm building a backbone.js application, and don't quite know where to put my templates. Should they be in separate files that I load when I need them via require.js? Should I load them all right away with require.js?
Both.
When a user loads the page from your server, you should immediately send all of the templates that they need to get the basic page layout and application up and running. Then you can decide which templates they are most likely to use next and pre-load those if you want. For the templates that work with pages they are less likely to use, or for pages that they have to go through a series of steps to get to, delay loading those templates until they need to be available.
There's no hard and fast rules about this, though. You'll want to experiment with different configurations and options so that you can create the best user experience possible for your application.
You can load html templates on demand with require: http://requirejs.org/docs/api.html#text
Related
I have been using Asp.Net Core MVC to load views and their content for several years. However, the trend seems to be pushing us strongly towards Single Page Applications (SPA). From my understanding, all html files are downloaded directly to the client. From now on we don't need to make requests to a server anymore in order to receive HTML, CSS, etc. because the routing of Vue (if configured properly) will serve the appropriate components.
All of this makes a lot of sense to me and seems like a good option. The thing I don't understand or am worried about is the loading time. Wouldn't it be extremly slow to download all files the first time when the website is called?
Well, I have never used and never felt like that I should use the UI router. I was asked in one of the interviews about this and so felt like reading if I am missing something out as an AngularJs developer.
Now, the explanations on internet displays it's strength based on the modularity and reusability of the components. Nesting of views etc.
If I want to reuse components in my view, then can't I use directive instead of a new state? According to this article by scotch.io(top google result) for ui router we can use separate data /controllers in my view. Well, can't I do the same via directive's controller and template. I can still reuse as many times as I want it.
Please let me know if I am missing some cool feature and makes it quintessential to use it in an AngularJs application (yeah a larger one with lots of reusable components of course) .
The whole point of the router is that it uses the URL to change states. If you just used directives, you would have to write your own mechanism for syncing up URLs with specific directives.
AngularJS is a framework for Single Page Application.
Single Page Application (SPA)
Single Page Application is a web application that loads single HTML page and dynamically updates a fragment in the page as the user interacts with the app.
John Papa's blog explains SPA in simple terms.
The biggest advantage of SPA that I see is
once the application is loaded, the state is maintained without
requiring server roundtrip when user navigates.
Users can bookmark deep link into your application. SPA framework (AngularJS) will take care of loading the required state when user open bookmark.
Although it is technically possible to achieve the above in a non-SPA application, it was never as simple as SPA.
SPA is useful for highly complex applications with many pages. For simple applications with 2-3 pages jQuery is the way to go.
Read Single Page Application: advantages and disadvantages for more discussions
You probably know all these and I think you are trying to achieve SPA using directive.
Routing
Routing framework loads a view dynamically based on user action into the main page without refreshing the whole application; providing SPA effect.
There are two popular AngularJS routing frameworks available.
ngRoute
UI-Router
ngRoute is based on URL mapping and UI-Router is based on state name mapping. I prefer UI-Router.
Routing vs Directive
Now, the explanations on internet displays it's strength based on the
modularity and reusability of the components. Nesting of views etc.
Yes directive is used for modularity and reusability and can load views dynamically but cannot choose a view dynamically based on user action. You have to write complex conditions within directive to choose a view dynamically.
For example, if you have an application with 3 links and you need to show a view based on the link user clicked.
Using directive you need to keep track of what the user clicked and write a mucky condition to choose a view to display. Most of the time you will fail to achieve the effect because the link can be accessed in multiple ways.
On the other hand, once routing is configured, the corresponding template will be dynamically loaded when user clicks the link. It is way easier to change the view based on user action.
Another advantage. When user opens a bookmark deep linked into the application, routing framework will take care of loading the sate (It is impossible to achieve this using directive). It feels more natural way of designing an application.
Choice is yours.
I just learned how to create custom directives with angular today via codeschool and it is fantastic! The way it taught me was to make a directive in my JS file, link it to an html file, then write the tag accordingly in the index.html file which is my main file.
My question is does creating a whole new html file for a custom directive hurt load times on the main page? If you want a reference to the section I'm in, it is shaping up with angular level 4 (custom directives).
It depends on whether or not you precompile the templates directly into your main.js or not.
If you precompile them, your main.js will take longer to load, but, when rendering the view, angular won't need to send an http request to get the template so rendering will happen faster.
If you don't precompile them, the up front load time will be faster, but rendering the view may be slower the first time because angular needs to send an http request to get the template for the first time. after the first load, it will be cached in the template cache.
You could also use a hybrid solution, precompiling things needed for the main entry to your app, and letting angular request the rest as needed.
which one is better is a debate not suited for stackoverflow.
I am starting to develop a business spa application (mobile/desktop web app) with Play Framework 2 and AngularJS. Right now I am tending to go with following solution:
Play behaves as a RESTful application
Play also pre-processes partials
AngularJS handles the rest
My arguments for pre-processing partials are:
Play can remove parts of a partial for a more compact mobile view
Different user roles see more/less content of the partial
Correct language will be loaded into the partial
Are there any disadvantages with this approach? Do you think this would be the best solution for the project's requirements?
Server-side templating is usually what you want to get rid of when building an SPA. In general this should work, but there are a couple of disadvantages:
You are mixing two template languages, Play and AngularJS, so you must be careful not create an unmaintainable mess
Your display logic will also be distributed or duplicated between Angular and Play; in a pure RESTful approach Play would mostly be concerned about access control and JSON (input, output, validation)
You must create a route for every partial instead of just using the assets route
Server side templating slows down compilation speed
Returning different content depending on roles and desktop/mobile might mess with Angular's $template cache
Different user roles see more/less content of the partial
This should be handled by Angular IMHO, Play would just make sure to only serve the appropriate JSON to the right users.
Correct language will be loaded into the partial
How would you reuse Play's Lang in Angular? Build an inline variable? Again, just load it via JSON when the app bootstraps.
I have Backbone working with pushState. It's very nice, but now I understand that I should support loading the app from any route that backbone uses. For example, if somebody enters a backboen route manually to their browser, the server should respond to that and render the page and then let backbone take over.
What I am wondering, is what is the most efficient way to handle it? Backbone recommends also bootstrapping data on initial page load to reduce ajax requests. Should I only try to bootstrap data that is necessary for that particular view or should I try to bootstrap basic collections (for example: users, settings, documents, etc)?
For the first part of your question, you could just specify a callback route (which matches everything and gives the homepage) so the user never gets a 404 (don't use that when developing the app though, it could give you some hard times debugging it if you have a real 404 when making a call to the server).
For the second one, I'd say it depends on the amounts of data you need. I'm personally developing a modular application, and unfortunately can't really bootstrap anything. I'd say it's just some advice.