How to accomplish live preview feature in a web app? - javascript

Basically, we are using a headless CMS to edit content on Website A. We are building our own CMS UI based on the headless CMS API (call this Website CMS).
Now, we have this page in Website CMS wherein you can edit the content on the left panel and get a preview of Website A on the right panel (mobile view).
I haven’t done anything like this before and I am wondering what’s the best way to accomplish this and if there any libraries that help with this functionality.
Some ideas:
Embed Website A within Website CMS and any changes done on the left panel basically just refreshes Website A (which is just embedded into the page).
Recreate Website A as a page in Website CMS and call the same APIs so that the changes both happen on Website CMS’s Website A and the actual Website A. (Although I don’t see how this would be more beneficial and will create 2 separate codebases for the exact same page).
Others???
Main framework we are using is ReactJs for this CMS UI.

Option 2 is what I would do and wouldn’t necessarily be duplicative.
You would want users to be able to preview changes without publishing them. So porting the real website wouldn’t be compatible with that goal.
Code duplication would probably be minimal. It would share most of the same code and it would also propagate much faster.

you can establish a communication link between CMS and website A to exchange data.
Options
you can embed website A inside Website CMS using an iframe and then you can use postMessage to exchange data between CMS and Website A.
Or else you can use WebSockets where website A will listen for the changes done at the left panel of the CMS.

Related

Communicate w/ Javascript running in an iFrame

I'm currently working on an application that uses the Phonegap/Cordova framework to display an online and an offline version of a website. If you're not familiar w/ this framework, it offers a simple way of creating multi-platform applications by displaying local files in a full-screen webview.
When launching the application, the Javascript integrated in the local files of the application detects if Internet access if available, and redirects the user to either another local webpage containing a full-screen iFrame of the live website, or a reduced offline version of the website (contained in the local files of the app) if no Internet connection is detected.
I would like to detect when the user logs in using the various forms on the website (being displayed inside the iFrame), but I have no way of knowing which page the user is on, or interact w/ the website content at all because of the same-origin policy.
Would it be possible though to make the Javascript from the local page (which contains the iFrame) interact w/ the Javascript from the remote page (which is being displayed in the iFrame)? This way, I would be able to obtain the login information, and save it for later use (obviously not w/o using a token system), but also it would help for another planned feature (trigger the guidance system).
Thank you.
Look into HTML5 communication, it's pretty simple and sounds like it fits your needs
http://stevehanov.ca/blog/index.php?id=109
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

HTML5 Mobile Web App

I've just created the required HTML5 Mobile web pages(including the CSS3 and javascript pages). I've got the apk file from build.phonegap.com as well.
But I want it to be dynamic i.e I should be able to add content from my laptop.
I've searched a lot but I'm unable to get the right info on doing this.
I just want to be adding simple text paragraphs from my local server(laptop) to the app on the go. What do I do ?
Sound like you need to set up some type of json / sql web service.
Use your machine's ip to do this.
Suppose your laptop ip is 192.168.1.1
Then from your application just use
http://192.168.1.1/your_appliction/webpage
replace http://localhost/ to http://10.0.2.2/
EDIT:
Treat your laptop as remote server and access the files in it as you normally do in website building.
From another post I think might help...
1- if you are building the whole site from scratch: You can create your site by any CMS like dotNetNuke or joomla which will allow you to login and edit what you want
2- if you are building just this page from scratch : You can build your page with online-editing in mind, in this case I recommend to build two pages one for for viewing content and the other for online-editing you can use any HTML-Editor control like FCKEditor
3- if you are dealing with already built page : it will be easier to build administration page which you can upload the new version of the content page to it, and the administration page take care of replacing the content page
Or maybe even the knockout js plugin could be something to look into http://jsfiddle.net/rniemeyer/LkqTU/

Facebook share with one-page application

This question may be not related to exact software stack, framework or language.
For my current project, we are using AngularJS to build the front-end that has a constant entrance page to load real data and render, which is easy for CDN and good for fast loading speed from browser side. But for some social feature, such architect may result in some problem. For example, when you paste your interested link to Facebook portal to share, Facebook will grab your page and show up a preview. If a landing page is empty, such preview won't work.
(I heard that Google+ recently support rendering javascript logic at server side before send back a preview, but obviously it's not a common support for other similar services. Google.com also supports indexing js based one-page application.)
Is there a better solution to solve this problem gracefully rather than fallback to have dynamic page which includes real data? Have I missed something in understanding this problem?
========
... I was even thinking of that, for requests that identified as FB request (like user agent), redirect it to a special gateway that wrapping sth like PhantomJS, fetch the page, render it server-side, and send back a DOM tree snapshot as content for FB to generate preview. But I also doubt that it's a good direction. : (
We are in the same situation. The simple solution is to use Open Graph meta tags in the pages your server will serve to Facebook scrapers.
Basically you need to do server-side what your web app is doing client-side. Amount of work highly depends on your hosting technology (MVC makes it super easy), your URI format and the APIs you use.
You will find some explanations here:
https://developers.facebook.com/docs/plugins/share-button/
Open graph introduction:
http://ogp.me/

Displaying External Webpages within an Enyo App

I'm new to Enyo and am trying to implement display interface for my website within an Enyo app.
Basically all that I want to display is the app's toolbar on the top of the page, and the rest of the page would simply display the contents of my website.
Considering that my website is already optimized for responsive display, how do I implement this without encountering Cross-Origin issues?
I think you'll want to embed your site's contents within an iFrame. You haven't said whether the app buttons will need to interact with your site's contents so you may run into some issues there.
You don't quite have enough detail for a better answer. What cross-origin problems do you predict? Where will you be deploying? Will you be pulling the site live or will you have a cached copy you distribute with the Enyo app?

Facebook-like content load

I'm working on a big website at the moment and the designers are talking about making a facebook-like content area.. By this they mean that they want to keep the header loaded at all times and then only reload the content area when a link is clicked. Still we want to change the url to keep the framework working as well when accessing some page directly.
I'm not sure how to explain this any further - check out facebook and take a close look at the header whenever you navigate to another page..
Thanks..
I'm not sure if you're even asking a question, but here's my response.
Facebook, like most other major websites, use frameworks (custom built, or not) to separate a template into components, separate code logic from design, and more.
The reason why the url and the header will not change is because one of the designated areas of the body is acting as a container. When links are clicked, the data is gotten via remote procedure calls... via their facebook API. The content that is returned is then loaded into that container via javascript.
keywords: ajax, rpc, rest api, javascript, mvc, framework.
all of those things are important to that style of web development.

Categories