I'm currently working on a social app using Angular. I'd be keen to have public, search engine indexable pages to accompany the app, such as an indexable homepage, about page and contact page.
What would be the best way to go about this? I'm undecided what my backend infrastructure is going to be, but it either going to be one of the following:
nginx/apache server to vend all content with an external pub/sub service for realtime.
Separate service for both front end and backend - nginx server vending front end content. Separate node server for backend socket stuff.
Any advice on this would great. I'm keen to figure out whether angular handles all of the routing, or whether i handle the static routes separately. This is my first time playing with Angular.
Cheers.
I might be wrong but I think your problem is not an AngularJS one, it's more fundamental than that.
Your issue is one where you are loading HTML content via AJAX. And how does Google etc. crawl AJAX loaded content if it can't execute JavaScript?
This might help:
https://developers.google.com/webmasters/ajax-crawling/
This might help too but its geared towards .NET: http://gregorypratt.github.com/Ajax-Crawling/
If you provide a solution where you let AngularJS do the routing but you still are able to serve static content from the server when ?_escaped_fragment_= is present in the URL then you're good to go. You get single page app benefits whilst still being crawlable.
The following is an example site using AngularJS routing and static content being served for Google et al.
http://artelier.co.uk/#!/about
http://artelier.co.uk/?_escaped_fragment_=/about (turn off JS to see it work)
Related
i got a question about the rendering behaviour of react. Please correct me if I'm wrong, im new to React and Web Development.
Afaik the default rendering of a react SPA happens on the client side, right?
So this means the whole JSX code in the src directory will be downloaded on the first visit of the page (see image of the Chrome WebDeveloper Tools Source Tab), right?
Let's assume i would develop an admin area where only authorized users should have access to, e.g. through JWT, the JS-Code still contains information about the admin area, even if it's not rendered, a guy with the corresponding knowledge could get access to the area because all information about the admin area is already downloaded to the client computer, right?
Sure i can protect sensitive data through the api and JWT Token, but what about if i don't want the client to know about the admin area content? Is there a best practice for some kind of this case, e.g. a mix of client-side (default user content) and server-side (admin area content) rendering? What would be the best way to do this? What are the advantages and disatvantages of client-/ or server-side rendering?
Thank you &&
please be kind, as already mentioned i'm knew to React and WebDev &&
sorry for my english, i try to improve it continuously.
Afaik the default rendering of a react SPA happens on the client side, right?
Not necessarily. It depends on how you set up the project.
So this means the whole JSX code in the src directory will be downloaded on the first visit of the page
Not necessarily. e.g. see Webpack code splitting.
Sure i can protect sensitive data through the api and JWT Token, but what about if i don't want the client to know about the admin area content?
Don't put the content in the app. Keep it in the data that is protected by your JWT.
Or make your customer facing application and your admin application different apps in the first place.
What are the advantages and disatvantages of client-/ or server-side rendering?
Server-side rendering is faster on initial load, works when JS fails, and is better food for search engines.
Client-side rendering is faster on subsequent page loads.
It's not really a factor in security.
I'm creating a PWA for my website.
It was a multiple page website built using jquery. Now I have created an app shell which consists of a common header for the site. My site has good SEO ranking and ranks in top 3 links usually.
Now when I want to go from page A to page B and I want the header to be preloaded and a loader gets displayed until the data for page B is received from the server.
I am still using jquery as most of the modules are already built in that and I don't want to rebuild them.
Now the only solutions I can think of to achieve this is either using an ajax call or using routes on the frontend. I have few queries and perceptions about these solutions and want to know if I am right.
1) Using Ajax -
When calling page B the HTML in response will have only the header and the loader and a js file in which will have the ajax code to load the data on the page.
Once cached the HTML containing header and loader will be fetched from cache and ajax call will be made to call data.
Please correct me if I am wrong.
Now, the problem I see with this is that consider I have page 3 and want the same functionality in it then, I'll be storing the same header again in the cache for this purpose.
2) I have heard that routes on frontend are not SEO friendly or require extra effort to make them SEO friendly. So I don't want my ranking to be affected due to this. Moreover, I don't have any idea about good routing library which handles everything for me in Jquery or Core Javascript.
Any help will be highly appreciated. I am highly confused at this moment so any guidance or reference in the correct direction will be of help.
There's some guidance about possible options in this blog post.
Given your current setup, and your stated desire not to overhaul your architecture too much, I'd recommend trying to add in a service worker implementation that cached your header, footer, and dynamic content separately. The service worker could then concatenate the header (from the cache) + content body (retrieved via fetch() or potentially from the cache) + footer, and return the complete HTML document as the response.
You would need to start exposing your partial HTML header + footer as resources with unique URLs that could be precached, which you're probably not doing right now, and you'd also have to expose just the content body for a given page via a unique URL, and ensure that they're all in a format that could just be concatenated without requiring any complex templating logic.
So it is some extra work, but it does not involve rewriting anything for clients that don't support service workers, and your site would continue to look and behave the same for those clients.
I have
a wordpress landing site/blog on example.com
a meteor app member area on members.example.com
This has worked very well so far - both technologies are very suited for each part.
I'd like to add some client-side functionality to the wordpress site that communicates with the meteor app. At the very least it should be able to retrieve log in status and username from the meteor app. Additionally I'd like to add some forms that interact with meteor data.
Is there a best practice for this?
I would suggest adding a REST API to your Meteor app which exposes the data you want via HTTP Methods. GET for things like getting the user login state or username. POST to create the forms you would like. I cannot describe how to do this any better than what was said on Meteorpedia, so I will just refer you there:
http://www.meteorpedia.com/read/REST_API
From there you would call the REST API from WordPress. I am by no means a WordPress expert but I do imagine there are probably a number of plugins and there is probably built in functionality in WordPress to call a REST API from the client side. If not, you could make AJAX calls using custom JavaScript or jQuery or whatnot.
I have a very similar setting for my app!
I also thought of ways to interact between my two sites. Basically, you would have to set up an access between Wordpress and your app's MongoDB database, and I am sorry to say, it does not seem very likely to happen in a near future...
Best thing you could have is actually going the other way (accessing Wordpress's MySQL through your Meteor app), using a package like meteor-mysql, and even that would only allow you to read the data in your wordpress database... but reactively! Wooo!
To my knowledge, that is the best "interaction" I can think of that you can get (without extensive hacking) so far.
Then if you are ready and willing to code your way through, you can implement calls to your meteor server using the meteor-ddp-php client in your WordPress site. Just make sure your Meteor methods are safe to call.
If you want to load your meteor application into you wordpress blog then you could just load it in as an iFrame.
To communicate with the meteor application just build some endpoints onto the meteor application which can be used on the wordpress blog. Because meteor is reactive the changes you do with the endpoints (Probably rest since is the simples option imo) will be directly shown in the iframe.
My 2 cents
I have following problem which I can not handle mysefl:
I am wondering how to maintain ID of the client across different subpages at the server site.
Let me explain my scenario in more detailed way:
I have a pages (simple html pages with just js scripts (bootstrap, jquery and so on, no ASP involved) and one SignalR hub on the server with broadcast function to all clients. (my application is monitoring system for a industrial device, and simple functionality for a hub is only needed).
Now I have to add ability to block changing several textboxes or select items on webpages until password is entered. And I wonder how to keep information that the user is logged in on server site.
I know that every page refresh or switching to a different page which uses the same hub gives the client new connectionID.
I've found solution with custom ConnectionIDFactory method but I dont how to implement it in my project since I dont have global.asax file.
Any sugestion how to get solution for this scenario?
Have a nice day :)
I would suggest using a framework like Angularjs on your front end. You can then specify the routing within Angular and load the screens you need but at the same time ensure that your connection to the hub isn't being interrupted by moving to a different page. Here is an example of how angular achieves this. Hope this helps. It also ensures that you don't have to worry about trying to shoehorn the factory into your app.
I have a bunch of external dependencies in my app (XML, HTML, Web Services etc).
These can change w/o notice. How do I allow myself to fix them without having all traffic go through my server and without waiting for an app to be certified by the marketplace?
[]
You could post your app at SiteApps.com. By the way, they hold your files in their CDN and only updates if you programatically updates.
I wrote a series of blog posts about exactly how to do this by using XPath and Javascript to be able to customize your app and allowing you to fix/change elements in your application without going through recertification.
You can take a look at the first post in the series and take it from there.
http://socialeboladev.wordpress.com/2012/09/03/change-resilient-windows-phone-apps-2/