URLs shall be without hashbang
It shall fall back for older Browsers which don't support the History API
Using Angular or Ember
Question: Is there a need to use the history.js?
If yes, read on.
On teamwork.com or soundcloud or other modern websites there is a mechanism to have links loading just a part of the website and at the same time, the URL changes (there is no hashbang). I want to implement this as well and also want to support older browsers and read that history.js can do this. Here is a related question to this where I found that this uses the History Api.
At the same time I want to uses Angular or Ember. I know they have their own routing and there is for example a tutorial to remove the # here.
I read that the different browsers handle the history api differently and that the history.js is a way how to tackle this issue.
So is there a way how to combine those front-end frameworks with that api? I'd start somewhere in the routing but get stuck thinking about what to do...
A new implementation should have cross-browser compatibility including handling older browsers. On one hand I want to have a front end framework to separate front from the backend, not sure about which one to use, yet. On the other hand I like how i.e. teamwork.com handle links that they only load a part of a page (including an animation) when you click on it. At the same time the URL changes and if you type a URL directly the page is loaded correctly. It seems that they do it with jQuery.. not quite sure.
Anyone knows how to use both, routing and the history.js?
I would just use AngularJS with UI Router. It combines routing with history.js like features. It has a HTML5 mode which you can enable which will allow pages to update via AJAX without the use of a hash #.
It should automatically cope with older browsers and change the URL format accordingly.
Related
I have a request from a client to implement deep linking in our React application whereby clicking a link will take them directly into the installed app (potentially to a certain point but not sure on that yet).
To my understanding react-native and react-navigation both handle this as part of a feature set within "Linking" that they offer. However it seems excessive to import a framework just for deep linking (perhaps not though).
After googling I can only really find references to deep linking on react-native or react-navigation.
What is my best course of action?
Let's get to some basics first, then it will be clear.
In modern SPA's, say with React, it's common for the SPA to handle navigation itself. You need to use browser's history API. It's because your SPA is just a single index.html with bunch of js code, so it sort of virtual, every page is constructed by your app. In order to not reinvent a wheel, its easier to use some library for that, say react-router-dom.
But then everything works as expected, and you have deployed your app. When user wants to get some deep page, say, https://my-awesome-app.com/deep/page/1, browser will just send a request to a server, asking: "Please, server, give me a page 1.html, in folder page, in folder deep". But server doesn't have that file, because it has literally one index.html, because its a SPA application. Then we need to tell the server to re-write all deep routes to index html, here is an example for my app hosted on Netlify:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
When user will ask for that page, server will 'redirect' that request to the index.html and my react-router-dom will figure out which 'PageComponent' to render based on that path.
So, you can implement routing in your app yourself, probably using browser's History API, but I guess it might be easier to use library. But it's your call.
On the other hand if your app is not an SPA, the story might be different, because say in NextJS routing is implemented in framework itself, and if used deep linking would require different setup depending on how app is deployed.
Deep-linking is handled largely by Apple and Google server-side
https://www.adjust.com/blog/dive-into-deeplinking/
React-native provides extended functionality for deep-linking within mobile apps but normal web-applications there is no need to implement it there. Use universal links or Google specific links as standard linking within your web app to enable deep linking
I am using angular-ui-router with my angular 1.3 app. I am looking to upgrade it to angular 1.5. What are the best options for routing in angular 1.5? Shall I continue with angular-ui-router or shall I move to something like angular-new-router. Please suggest. Also, If there is a documentation for easy migration, it will be helpful.
Routers in angular
As mentioned earlier, the two mainstream routers for angular.js is ngRoute an ui-router. There is the new router which is part of angular 2.0 - Although it promises amazing features, I currently do not recommend adoption of it and angular 2.0 until it's stable and because of stories like this and issues like this.
Read before upgrading
"Upgrading" to the newest stable release of any library is most alwasy preferable. But before you do; you should read the release notes for every single version up to the version that you're upgrading.
Check the migration guide
Google is working on improving their angular documentation. The migration documentation however is particularly good. Take a look at it here
Depending on the status of your project you might want to stick with the ui-router as angular 1.5 is backwards compatible with all your modules and the upgrade should be smooth (read the docs though, including the upgrade to 1.4).
On the other hand, Angular 1.5 is meant to bring us close to the concepts and architecture of Angular 2 and web components (which are now thought of as the future of web development) so it's a step on the learning curve that most ng1.x developers should take.
Angular 1.5 allows you to write your app in a component based fashion with a different routing mechanism, having routes/URLs load components that you defined instead of loading partials.
Routes can now be embedded in child components (say you have a Users module which has a /list, /details/:id/:slug, /edit/:id routes/sub-components and this Users module can be attached to whatever URL from your app: /users, /admin/users/ while keeping its internal routing mechanism. Your base app will have non-terminal routes for this kind of components (specified with /... meaning it will leave the consequent routing to the component itself).
Also, you can have multiple active routes at once (i.e. think modals, as in Gmail where you can look at a message and have the Compose popup and then navigate to the message list while still having the Compose popup open).
Routing events are now hooks that you can implement in your own component so you can do your resolves locally (fetch data, check for user rights, etc), taking care of destroying stuff, specify whether the component should be reused or reinstantiated, etc.
Bottom Line
In Angular 1.5 the new routing mechanism is based on components instead of states/views so your app needs a refactor towards this concept in order to fully benefit from it.
I am creating a single page app (mobile/desktop) using AngularJS. Based on the limited knowledge I have of AngularJS, I think the routing for the apps/websites is based on urls and $location/$location.path directive is used. However, in mobile or desktop apps, there is no browser. So how does AngularJS routing work in this case if views need to be switched?
Thanks
If you are talking about an Angular application by itself, it will always need something to be interpreted by something. Angular is written in JavaScript which means it will have to be interpreted by something which understands JavaScript. I am using the word interpreted instead of compiled, because JavaScript is not a compiled language.
But then how does something that interprets JavaScript display it on my screen you ask? For this you'll need a bit of background information.
The DOM
This is where we got to the Document Object Model DOM. From W3c:
The Document Object Model is a platform- and language-neutral
interface that will allow programs and scripts to dynamically access
and update the content, structure and style of documents. The document
can be further processed and the results of that processing can be
incorporated back into the presented page. This is an overview of
DOM-related materials here at W3C and around the web.
To dumb the quote above down:
you have a document (web page) which is being displayed and the DOM allows you to change this document which is being displayed.
JavaScript Engine
The link between JavaScript and the DOM is provided by an Engine. Every browser uses a JavaScript Engine. For example Chrome uses the V8 JavaScript engine. From an introduction of V8:
JavaScript is most commonly used for client-side scripting in a
browser, being used to manipulate Document Object Model (DOM) objects
for example. The DOM is not, however, typically provided by the
JavaScript engine but instead by a browser. The same is true of
V8—Google Chrome provides the DOM. V8 does however provide all the
data types, operators, objects and functions specified in the ECMA
standard.
How does this translate to your question?
Everything that wants to display a JavaScript application, needs to have a JavaScript Engine and a DOM. This could be a browser like Chrome, but could also be any other application.
A simple explanation of what a router does, is change the DOM to display different "documents". So plainly said: any application, be it a mobile or desktop application, which has a DOM understands how to use Angular's routing system.
Outside the browser means only application you are speaking about?. angular is tied to HTML pages in general. So its a framework for managing(not exactly appropriate word) the html pages to make them into Single Page Applications so that browser does not need to reload the entire the web application on request of a single page, it helps to invoke the html pages into the main html pages, this makes the application not to reload the entire, but to make available requested pages. this is where the routing comes.
Angular will work just fine there. In fact there is an Ionic project that is based on top of angular. E.g. if you are using Cordova, then the app is rendered inside a browser (or at least with the browser engine). So as far as I know it will behave exactly the same way with the exception of user not being able to type in URL or click back/forward.
Moreover I build an application for browser where I do not user URL as much as possible. E.g. I transition only between states and don't have direct url's in my application at all. Of course I need to support to the extent that a user can type in the url, but the ui-router does that on it's own if you map routes properly. But it seems much more beneficial not to rely on the urls at all for SPA (for internal stuff as you still have the edit url as I said before).
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.
I'm currently building a single page app using backbone.js
In order to keep all application pages accessible and crawl-able I made sure that the server side can also render the pages when accessing them directly.
The problem is as follows:
When pushState is not available it initiates the router using the current URL (e.g. if I accessed a url with http://example.com/example the router will build the hash fragment on top of that url)
So:
Is there any way of handling this (besides redirecting the use)
If you are redirecting as soon as the JS (using pushState feature detection) you still have a problem of urls not having hash signs.
Generally asking, is there a better approach of designing this kind of application?
Thanks!
I think the evolving consensus is pushstate or nothing (ie to degrade web 1.0 and drop hash-bang routing all together) if SEO-friendly browsing matters to you.
Its one of the reasons I don't use Backbone.js and just use PJAX is that pushstate and DOM rendering times are so good you can be single page with very little JS and hash-bang routing has always been rather hackish.
Thus an option is to not use Backbone's router all together and just let something like PJAX (or DJAX or something similar) do the routing work and let Backbone just do the inner page event/rendering stuff (ie validating forms, modal windows, etc..).