Do any of you know how can I share a component between several html pages but load it only once?
I`m trying to share a unit canvas between several pages, but it takes too long to load, so every time I change the page it loads again, causing a very poor user experience. I tried to create the frame once and put it on session to be reused, but it seem to be not the fix for it.
I need to use the same component amongst all the pages without reloading it every time the user changes the browser address.
Thank you.
we had the same problem with adding the communicator to out online app (something like on FB). The best solution is to do a single page application and manage urls by html5 history API, but is only applicable when you start development. You could also try something with iframe e.g. put canvas in main document and the rest (changing part) in iframe, but you will have a problem with urls, so it isn't solution.
Becouse we had working app when we started work on communicator we ended up with everything store in session like you did.
Related
Twitch has introduced a functionality that, when you've opened a stream page and navigate to a different part of the site, allows the video to keep playing in the bottom left corner without any interruption. This even works when pressing the back button in the browser and only breaks when closing the tab or manually typing in the URL you want to go to (e.g. https://www.twitch.tv/directory/discover).
I've been trying to figure out how this is being done. The video is embedded into a div with the class "js-player-persistent", so I assume it has something to do with a JavaScript and getting data from the session storage, but I'm unsure how much effort this requires specifically.
Twitch is built on EmberJS on the front end making it a Single Page Application (SPA). This allows them to not have to reload the page as you navigate, they simply utilize AJAX to load in the data needed to show the next page in a prescribed window. This is accomplished by the browser's pushState API or the hashbang implementation for browsers that don't utilize pushState.
Looking at their implementation of it, they likely have a hook that looks for navigation changes, before it happens, off the video player and at that time create a DOM element in that corner and put the video in it, then they proceed with changing the main page to wherever you are going.
This is fairly easily done in most SPA front ends like Angular, React, Ember, Vue, etc. and is a major bonus to them.
Twitch is an Ember app, which means it is a Single Page Application. It does not reload the whole page when you navigates between "pages". Regarding the use of the browser's navigation buttons, JavaScript routers take advantage of the browser history API to simulate a normal navigation.
After my original comment got as much popularity as it did, I figured I'd explain my presumption a bit better.
Twitch is a SPA, or Single Page Application. This means that when you go to a new "page" on the Twitch website you aren't actually going to a new webpage, you are loading a new view. Each of these views are basically sections of content that seem like pages but don't reload the entire page. This is commonly used with cross platform mobile apps.
The pros of Twitch doing this is that they communicate with their back-end constantly and the site handles that well with the streams. (They recently switched from a Flash to HTML5 video player.) This as well as having your current stream constantly playing even though you are exploring different sections of the website is a major plus for them.
The cons of all this is that your browser has to do more rendering meaning it is more intensive for your computer. And it is worth mentioning SEO can be harder with SPAs.
I'm trying to build a small homepage hosted on github-pages, with a (1) title, (2) navbar and (3) a content window. I'm updating the content with ajax and use pushState/popstate for url updating and browser history. The problem is that if one refreshes the page at e.g. user.github.io/content1, the page is not found (because the html file doesn't actually exist).
I read that if one controls the server, this is usually solved by redirecting (or mod_rewrite-ing) every requested deep link to one resource and from there reconstructing the page with javascript according to the requested link. On gh-pages, this is not possible, so I thought about actually creating all the html files reflecting the url paths, but with each of them only containing the javascript code to re-generate the corresponding state (so that e.g. if I want to update my title or the links in the navbar, I don't have to manually edit all of the html files).
I have read about Jekyll, but I'm a beginner and I'd like to program everything from scratch to learn something.
Do you think this approach is a waste of time? Are there better ways to do this?
Thanks a lot, Stefan
Two cases :
Making a Single Page Applivation (SPA)
Your SPA is a javascript application that needs to send datas to/from a server that stores them, and to render the results on the client side.
In this case, your problem is not a Jekyll problem, it's a data one.
You can then have a serious look at react, angular and so on, ...
Making static web pages
Github pages is using Jekyll to generate static pages.
This way you can generate static pages with a title, a specific navbar and content with nothing more.
In terms of development and performance, it will be far more efficient.
Why it's better ?
Still assuming that you're not building an SPA.
Anytime you make a change in gh-pages (anything new like page, post, ...), your site is rebuild (post, page, include like navigation, an so on).
New page -> commit to gh-pages -> new build -> everything is OK !
I've been learning about angularjs and have been very confused about how angular manages to change pages without refreshing and yet have a completely different view.
Are they actually changing the page URL or just hiding all the elements of on page and showing the other?
This video by CodeSchool explains it quite well.
AngularJS is just a tool that allows you to build single-page web applications with relative ease. What you are looking for is actually the definition of Single-Page Application:
Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript.
Also, from http://www.johnpapa.net/:
A SPA is fully (or close) loaded on the initial page load, it’s key
resources are preloaded, and progressively downloads features as
required.
And, more specific to your particular question:
When a user clicks on a menu item, the SPA sees that url and
translates it to a View that should be displayed. If the view has not
been seen before, the application may make an HTTP request to retrieve
the HTML template for the view. Then it will compose the view, fill in
the template, and display the view in the appropriate location within
the shell. If the view has already been viewed once, the browser may
have cached it and the router will be smart enough not to make the
request. This is one way a SPA can reduce round-tripping to and from a
server, and thus improve performance.
Keep in mind that this behavior is attained with the use of JavaScript, and does NOT require any specific library or framework (such as AngularJS), although you will probably want to learn how to use one to facilitate the process.
I also recommend you check these resources:
http://johnpapa.net/building-single-page-apps-with-knockout-jquery-and-web-api-ndash-the-story-begins/
http://www.johnpapa.net/pageinspa/
If your url's are mapped with the $routeProvider, you can reload a controller invoking $route.reload().
I wonder how sites like SoundCloud work: you play a song and it keeps playing even if you move to another page without stopping
Any suggestions?
The only way I can think of is to build your app, or at least the parts of it that need to bo continuous, as a single page.
In practice, this means that only one HTML document is loaded. When, say, a link is pressed, the browser action is intercepted and prevented and the browser behaviour is faked by javascript.
Consider a website consisting of pages A and B. Normally, when a link pointing to B is activated, the URL is changed and the browser calls the server, requesting B. In a single-page application, however, this is interrupted by a javascript function, which changes the URL using the History API, and then displays B in a way that doesn't require a new document being synchronously fetched from the server.
There's a couple of ways to do it.
Navigate to a new page
If you do that, a whole new JS execution context is created for the new page, so you can't keep the function running. What you can do however is to "resume" execution in the new page. For this you need to save the state of the old page either on the server or in some client storage that persists between page changes (cookies, localStorage, etc).
Fake navigation
This is the most user friendly way - you turn your website into a web application. You no longer have multiple pages, so when user wants to change what he sees in the browser (like go to a new song), the app simply changes the appropriate area with the desired content. This is a complex topic that should probably be researched in itself, not explained in a SO answer. Go ahead and google "single page application" and you should find plenty of resources for it.
Technically you never change the page when you are using souncloud. You always stay on the same page and only the parts get changed which are actually changing, so you never reload the whole page. That's why they can keep the music playing: They just never remove or change the actual player. If you are wondering why the URL in your browser is changing if you never leave the page: They manipulate your history entries.
If you are interested in creating an application that behaves similar you should checkout frameworks like Ember.js or Angular.js. TodoMVC Gives a nice overview of those frameworks.
I'm making a Django page that has a sidebar with some info that is loaded from external websites(e.g. bus arrival times).
I'm new to web development and I recognize this as a bottleneck. As it is, the page hangs for a fraction of a second as it loads the data from the other sites. It doesn't display anything until it gets this info because it runs python scripts to get the data before baking it into the html.
Ideally, it would display the majority of the page loaded directly off my web server and then have a little "loading" gif or something until it actually manages to grab the data before displaying that.
How can I achieve this? I presume javascript will be useful? How can I get it to integrate with my existing poller scripts?
You probably don't need up-to-the-second information, so have another process load the data into a cache, and have your website read it from the local cache.
The easiest but not most beautiful way to integrate something like this would be with iframes. Just make iframes for the secondary stuff, and they will load themselves in due time. No javascript required.