I am developing a web app that has a sign in page for signing in. But also, for example, there is a public page for facebook sharing page.
If a user wants to go into the panel, url is:
http://127.0.0.1:3000/#/shops/:id/
If someone makes a Facebook share, we have a public page like:
http://127.0.0.1:3000/#/public/56af5229d0ae74e324c662f9
My problem is, I have 1 index.html for this app, and it includes css, js links and a ui-view for ui-router. For public page, all those unnecessary files are loaded.
In index page, I have:
<div ng-if="isPublic()" ng-include="'views/public.base.html'"></div>
Also, I cannot control the meta tags of the page.
How you can handle separation of pages in such a case?
I have a site with public/private parts, but I took a different approach in terms of resources. I did not separate them since it would be just to much work, instead I did this:
Minification
Bundling
Pre-compressing
Caching-forever with the hash-string
Putting all the html templates in a js bundle
Yes, this will make all the js/css that is not needed for everyone to load, but you can think of this as a standalone application: you have to download the whole executable/package and install it but you don't use all the functionality (e.g. think of Office). If you optimize all as much as possible, the few additional kilobytes won't do any difference and the data will be already there when the user logs on to private part.
P.S You can see how to do some of the points in here.
Related
Hello guys i am new to React Js i often hear and see posts regarding react is single page app but never understood what is SPA and many say that it doesn't reload the pages but i didn't understood why so could you guys please explain me with simple examples.
A Single Page Application is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages.
This means that the URL of your website will not change completely (page will not reload), instead it will keep getting content and rewriting the DOM with it instead of loading a new page.
The goal is faster transitions that make the website feel more like a native app
Example: Netflix
This is the dashboard, and when we click on any movie, it changes to /watch and the content is rewritten.
In Technical Terms:
When building your react-app, you can see that there is only one
App.js from where your entire web-app is loaded in fragments and
components. This behaviour of rendering components and pages on a single page and changing the DOM( is a single page behaviour and hence the name), instead of loading a new page with new content, this makes it feel like a single application.
As mentioned in Glossary of React Terms:
A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded.
And about "Why is React Js called as Single Page Application":
Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook.
A single page application has one single page e.g. www.google.ch. It is exactly one HTML file (with all its required dependencies) loaded into the browser. You'd navigate between paragraphs only using hash-router, but never ever visit another page like www.google.ch/maps (that would then be www.google.ch/#maps, which references / -> index.html) (tho google may not be the best example, it is more about URIs).
ReactJS is an open source JS library for building UI and used for SPA, and it manages the views of web apps. Reactjs can help you to modify your data without reloading of a page. It is a popular library in the market trend because of its scalability & fast performance.
Single Page applications are different from multiple page apps that we see everywhere because the SPA doesn't move into new pages; instead, it will load the pages inline within the same page.
In traditional websites, when we go from one page to another, the whole site is loaded. e.g - if you go from "www.example.com/hi" to "www.example.com/hello" the whole website is reloaded. No matter how much portion of the website is really changed. Let's say, the website has "Sidebar, logo, menu" on both of its pages, then the full reload doesn't make any sense. This takes too much time and decreases the performance.
Single Page Applications, as the name suggests, have only one single page that is loaded the first time you open the website. After this, no matter where you click, it is not gonna refresh the website fully.
browser reload button
The loading icon of the browser doesn't load when we move from one page to another on SPA site, as it does on the traditional websites.
Cons- SPA sites are great for UI UX but they are not the best when it comes to Search Engine Optimisation, it creates problems with rankings.
The Scenario
I'm developing the front-end (CSS only) of an Angular SPA.
I'm not especially familiar with Angular routing.
I'd like to add a standalone page containing Bootstrap components just for development purposes (yes, I know this means it won't be a single page application anymore). This way I have one unified view with all the components so I don't have to switch back and forth while working on the CSS. It also acts as documentation for the Bootstrap for the other devs to refer to.
What I've tried
I originally added a bootstrap.html page to the app folder, alongside the app's index.html This worked at first, but has now stopped working. What would be the best/standard way to achieve something like this?
Update: I've managed to fix some of the JS errors, so the page is up and running again. My question remains though: "is there a way of adding a standalone page that is considered standard/best practise, or is it literally just add a separate HTML page at the app root?"
If you use a target='_self' in your linking anchor tag, this should force a full page reload, and that will avoid the angular routing - which is where I expect your request is getting hijacked (by design).
e.g.
link
Answering your updated question
Not to my knowledge, since (as you correctly pointed out) this mixes the SPA design pattern.
I currently have an existing Preact JS site set up but want to add blog section.
So basically easy way to add new pages and routes.
I.e. blog/content-1, blog/content-2
I know I could easily create these pages and routes manually but is there something better out there that fits into existing sites ?
I.e. a lot of the static site generators I see out there, basically you need to run from the start and they generate a new site.
But in my case I just wish to add an extra section to my site which will be the static blog entries, not sure what the best tools out there for this is ?
If any ideas or suggestions would be great.
The preactjs.com website is built exactly how you are wanting to build this. It's open source: https://github.com/developit/preact-www
Basically, fetch your HTML content via Ajax (however you'd like), then render.it as Virtual DOM using preact-markup.
For a real-world example, here's how preactjs.com does that:
https://github.com/developit/preact-www/blob/master/src/components/content-region.js
I intend to build a typical information website that has a number of pages that do not require authorization to view them, however I also want to have a private section for staff to log in. For simplicity I am hoping I can do one Web API project and have everything within it to simplify my publishing to azure, simplify domain names and certificates etc.
Is it ok for me to have index.html as a container and use ui-router to navigate through even the public pages or would it be better to have all public pages as full html files and do typical href navigation between them?
Below is the possible structure I was thinking of
app/ -> all angularjs stuff including private views and controllers
Models/
Controllers
Index.html -> public home page
public/ all public pages
What I am trying to achieve is that all public views can be accessed via http but once the login page is accessed all traffic must from then on be https, does anyone have any experience of this?
Update:
I have decided to force https for all pages, does this take the structure worry away in that everything just goes under app?
Best way to keep this is as a full Angular SPA, using ui-router to move between views instead of having static pages (even if your partial views are just plain HTML without functionality). You can affect the UX by alternating between dynamic routing with Angular and typical old href navigation. The less the you make the user reload pages, the better user experience he/she will get, plus you must be consistent in the way the application flows overall so the user doesn't have bad impressions of it.
This isn't a problem question, but a theory/possibility question. I have made a polymer portfolio site with a list of image links that points to a html page in my file directory for example /projects/test.html. The problem that I have is that every time I click on the link it loads the new page because I have it as a separate html.
I read AngularJS can provide partial view. So if I can combine angular, I can keep my website header and just load the content of the links into the partial view.
I was wondering if this is doable, and do I have to fully install angular and change the file structure or can I just import AngularJS file and code from there?
Also AngularJS does provide routing which I will love as it make my url cleaner.I am just asking so I don't have to waste time if this attempt will not work.
Yes, all of this is easily achievable with Angular; you will not need to modify Angular. A couple things to get you going. This won't make sense right now but come back once you've dug in a little.
For prettier urls set $locationProvider.html5Mode(true);
You will want your server to serve all 404s for text/html requests to return your Angular application (probably /index.html on your server). This is so that if someone goes to https://mycoolsite.com/projects/neato (which exists in your Angular app, but NOT on the server) your Angular application will load and the router will display the correct route.