Make React components available to users as embeddable widgets - javascript

On the basketball-reference website, for the majority of the website's tables, there is the option Embed this Table, which allows users to generate a tag that can be included in their own webpages.
.
I am working on a React (MERN stack) application, and I would like to implement this type of functionality. In particular, there are a handful of components (that return tables, graphs and charts) that I would like to make available to users of my website in a similar manner. For another example, opta sports offers a feature for embeddable widgets that is similar to what I am seeking to build with React.
I don't know much about iFrames or about embedding apps into other apps. I'm not sure how to get started on this in React. Any thoughts or suggestions or links to helpful articles or libraries or approaches for this would be really helpful.
Thanks
Also: A similar version of my question was asked previously, however the only submitted answer is not particularly helpful.

Related

SEO and AngularJS

I am building a web application with Angular JS, I need this to be fully SEO-optimized.
It seems that for a few, google is able to crawl angular app but it is not clear if it can read everything (eg I read that directives cannot be interpreted).
So today, is an angular app fully google-compatible even if we use the full set of JS functions? What about other engines? Do we still need fantomJS static generation for Yahoo or microsoft?
As of today, AngularJS is still not fully SEO-optimized. Thus, a lot of developers still find it necessary to use services like Predender.io or cooking up their own implementation by using PhantomJS
Great strides have been made towards SEO-friendliness, especially when talking about AngularJS 2.0 since it allows you to render HTML on the server side (More info here).
However, even with the new additions it's better to retain control over what the search engines are seeing by creating pre-rendered versions of your site.
Here is a great article about this very topic: https://builtvisible.com/javascript-framework-seo/
To quote some parts of it:
Google can render and crawl JS sites. This, however is no guarantee that the outcome will be an SEO friendly, perfectly optimised site! Technical SEO expertise is needed, especially during testing. This will ensure that you have an SEO friendly site architecture, targeting the right keywords. A site that continues to rank despite the changes made in Google’s crawl.
In my opinion, it’s better to retain tighter control of what’s being rendered by serving Google a pre-rendered, flat version of your site. This way, all the classic rules of SEO apply and it should be easier to detect and diagnose potential SEO issues during testing.
As far as other search engines, it seems like they currently don't support javascript rendering yet: https://www.bing.com/webmaster/help/webmaster-guidelines-30fba23a
The technology used on your website can sometimes prevent Bingbot from being able to find your content. Rich media (Flash, JavaScript, etc.) can lead to Bing not being able to crawl through navigation, or not see content embedded in a webpage. To avoid any issue, you should consider implementing a down-level experience which includes the same content elements and links as your rich version does. This will allow anyone (Bingbot) without rich media enabled to see and interact with your website.

Angular dynamic content using modules

So my application is growing and becomming a fullscale enterprize application.
Because of this clients of my application has different request as to how it should look and feel.
Some of them want all of the content and some of them wants only parts of the content.
Because of these request we have to allow the users to costimize the application as they see fit.
Now ive been searching online to find a solution to how you might deal with this and i want to hear your opinion on the following:
The application contains the following features:
Chat
Forum
Usermanagement
Games
Now all of these features are used on different pages, some of the features are bound together to make 1 page an example of this might be:
Now the idea was to encapsulate all of these features into an angular module.
And each of the feature components into directives
using the above picture the game highscore would be a directive located in the GameModule.
Say for instance that our clients does not want to use the Game feature. Then all directives located in this module would not be visible / disabled.
Looking at the angular documentation this should be possible. But i need you guys opinion on this? Is is possible to do such a thing and if so how?
I hope you guys understand my question i really want to use best pratice to solve this issue and as far as i can read Modules is the best way of doing this.

Basic dojo 1.7 simple web application with an elegant infrastructure (e.g dojo boilerplate)

I have come accross an sample application with dojo 1.5, but it's not really what I want to achieve : it is not modular at all. I want to make use of the amd, and various design patterns (like MVC) to have a very organize application. Unfortunately, the dojo community and "example" are not quite visible or present (compare to Jquery). There's a lot of cool tutorials on various implementation of specific dojo features, but none that's explain the very basic on how to create a simple (but at the same time, complex) squeleton for a dojo project. I came across the dojo boilerplate project on github, and tried to start from there, but I find it really hard (as a beginner) to implement such trivial things such as an login or basic interface (and separate all that by module, event handling, data, etc.). I just don't want to make a dojo application by using only an index.html and one javascript file, I could do it, but for maintenance and adding stuff, it will just be a complete mess. With this post, I hope to gain some information on this specific subject and perhaps create a tutorial for dojo on how to start up a real web application. For example, applying the mvc pattern, I think a good application tutorial should have a login example (authentification) and a basic modular interface (like some kind of main container, and on various events, the container ui change for instance with different widget). I'll be working on something on github and posting up when I'm done. If your done before go ahead ;)
thank you.
There is TodoMVC at GitHub:
a project which offers the same Todo application implemented using MV*
concepts in most of the popular JavaScript MV* frameworks of today.
It employs dojox.mvc #PEM mentioned. It's not a typical way of building Dojo applications as dojox.mvc was released just on May 16th, 2011, but it is worth looking at. There is also live demo and tutorial Creating Todo MVC in Dojo:
Overview
Part 1: Models
Part 2: Views
Part 3: Controllers
Also have a look at the source code of Dojo Web Builder (+ article Introducing the New Dojo Web Builder).
Last but not least is Maqetta (sources at GitHub), the most complex Dojo application one can find. Look esp. in maqetta.core.client/WebContent/ directory.
Maybe you have not searched enough?
Dojo MVC :
http://livedocs.dojotoolkit.org/dojox/mvc
http://dojotoolkit.org/documentation/tutorials/1.7/data_modeling/
I just don't want to make a dojo application by using only an index.html and one javascript file
But that's basically what Dojo is for and good at...
If you just want to make cute animation on a plain old html website, rather go for jquery, it's sexier.
Now if you want to do a "real web application" then dojo is the right framework. But you'll also have to learn how to use it.
There are a couple issues with building a sample application tutorial.
First, a sample application with what you have described will need a web server to communicate with. Dojo is web server agnostic, so what technology do you choose to for the sample application? Secondly, a server is now required to make the demo available online, or the person interested in looking at the demo would need to install the web server. As simple as this sounds, it is a barrier and prevents a more novice person from continuing.
Second, even with a web server there are many ways to build/architect a web application.
I think a good application tutorial should have a login example
(authentification) and a basic modular interface (like some kind of
main container, and on various events, the container ui change for
instance with different widget)
From what you have posted, it reads like you are looking for a single page application. There are downsides to single page apps (such as SEO) and creating a sample single page application needs to make it clear to the developer what the downsides of using the sample are. It's not the magic bullet for all Dojo/Web applications.
I have a project up on Github and it certainly isn't ready for primetime, but you can take a look. This is a Single Page Application that uses Java/Spring for the backend server. I am a couple days away from checking in the Spring Pet Clinic example which will demonstrate some of the functionality. I also need to update the wiki to describe how to create a sample application.
https://github.com/cswing/evinceframework
Also, I use the theme tester often to take a look at different widgets. Not entirely what you are looking for, but some who get to this question may find the link useful.
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html

Web browser Text annotator to annotate documents

I thought to bounce this idea from people here:
I have to build a light-weight text annotator which will be later embedded in one of website.
The text annotator will be used to collect manual annotation for various documents from various users (i.e. human users which are logged in to that website). User will be rewarded based on their labor.
Wondering if anyone has already done similar thing or if someone has any thought on this task.
As per my research so far, somehow using CKeditor for this seems good idea.
This is totally new to me and I am also new to JavaScript (but hardcore with Java core :) ). Any assistance will be greatly appreciated.
The Firefox addon Semantic Checker retrieves semantic data such as this from websites. There are also several JavaScript libraries which facilitate creation of such metadata:
RDFaCE
createjs
annotate.js
alohaeditor with WAI plugin
vie.js with backbone.js
References
Commercial Benefits of Accessibility | CKEditor.com

What's a good way to merge remote, standalone web apps into a virtual site?

We have a few dozen web apps on multiple servers/platforms owned by 5 teams at our company and want to merge them into a single site. The UI part is straightforward - a common header with login/status info, tabs for the major sections of the site, and yui menus for navigation within a section.
The hard part is finding a way to do this while making minimal changes to the existing apps, which are easily breakable and a pain to deploy. We want to minimize updates to the apps and try to get it right the first time.
The only working solution we have now is to include a Javascript file to write the site header/navigation at the top of the page, which lets us easily deploy changes to all of the apps:
script src="..../site/include?appid=xxx" // app id determines which tab/navigation to display
Is there a better way to do this, especially one with better performance than remote dynamic Javascript that writes the entire page header? Are there existing frameworks to simplify this?
Consider using a portal framework like uPortal. You could aggregate all those webapps -- no matter what technologies they're written in -- by leveraging a web proxy solution.
This suggestion might be overkill if your needs are really & truly simple; but uPortal (and others) provide scores of additional functions -- like administration, statistics, SSO, and integrations with other platforms and services -- that quickly add to their attractiveness.

Categories