Is there a standard way to get React components dynamically from the server in order to render them at the client from already rendered components on demand? In other words, an already rendered component would return the ajax-received component when it will be re-rendered from the render() method.
With RequireJS and I think Browserify (using an extra package), scripts could be requested asynchronously. Currently I use webpack to transpile ES6 with Babelify.
My use case is that I want to create some sort of wysiwyg editor, and in theory there will be a repository of react-widgets that I would like to run on demand in an iFrame.
Thanks
If you are using webpack already you could look into the require.ensure functionality.
See: https://webpack.github.io/docs/code-splitting.html
This creates split points in your code without you having to do all the heavy lifting footwork.
I have a similar use case to yours and was able to use require.ensure successfully.
There are a few other tutorials/resources available:
http://jonathancreamer.com/advanced-webpack-part-2-code-splitting/
http://henleyedition.com/implicit-code-splitting-with-react-router-and-webpack/
https://www.youtube.com/watch?v=gvG8dSPCNno
Also, if you are building a wyisiwig editor you should check out draft-js.
https://facebook.github.io/draft-js/
Super cool and extensible, built right on top of React by the Facebook team.
Related
I'm very new to Vue and have been given a task of looking at creating some Vue widgets that could be embedded in a couple of existing non Vue legacy web applications. The idea is that we would create a library of these widgets which could be then embedded in either of the legacy applications and eventually we might migrate the entire apps to Vue.
I've been searching for the best way forward and I am a bit confused. I guess these are my questions:
Do I need to be thinking Web Components here or can the widgets be actual Vue applications that we embed somehow?
If the widgets should be created as Web Components is there any difference between using the Vue/web-component-wrapper or the vue-custom-element library?
Whichever option we choose can we make full use of features that you would use in any normal Vue application - Vue router, Vuex for state management etc (and can state be shared across those widgets)?
Would the widgets need to be fully styled or would it be best practice to leave all the styling of the components to the parent app (or a combination of the two)?
I've never done anything like this before (as you can probably tell!) so any guidance or advice or pointers to examples would be appreciated.
** Update **
I found this article which I think is the direction I need to go in https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97
There are three distinct (but quite similar) cases:
web components
They are supposed to be an encapsulated web fragment. If you want, it's a smarter alternative to <iframe>s. Its main use case (and what it was designed for) is to display ads in a page and guarantee the host can't mess with its internal logic and rendering.
custom elements
These are, simply put, declared and registered custom HTML tags. The advantage of using them is being able to mark them as off-limits in any outer framework, stating: "this custom element is not one of your custom components, treat it as an HTML tag".
framework components
By default, modern JS frameworks (Angular, React, Vue) use this pattern internally: their internal components look like custom elements (case 2). But they are not. They are just internal conventions, without ever making it into the HTML markup output of the app.
Here's what happens internally: when the template is parsed, if an unknown HTML element is met, the framework assumes it's one of its registered components. If it is, the tag is not rendered. A new instance of that component is created and the tag is replaced with the contents of the component's template (or the result of its render function).
All of the above frameworks, when running into an unknown html tag that is not a registered custom component will issue a warning along the lines of "hey, did you forget to register this component?". Unless it's registered as a custom element (case 2) - in which case they treat it as as such: an HTML tag.
Vue handles all of the above with grace. What you choose for your widgets largely depends on context and desired end result.
Here are the answers to your questions:
Do I need to be thinking Web Components here or can the widgets be actual Vue applications that we embed somehow?
You shouldn't go with Web Components if you want to be able to style them from the context.
If the widgets should be created as Web Components is there any difference between using the #vue/web-component-wrapper or the vue-custom-element library?
Yes, there is. #vue/web-component-wrapper produces web components (encapsulated DOM framents).
vue-custom-elements declares and uses custom elements (custom HTML tags). Their content is HTML markup (not encapsulated). The advantage of using custom elements is being able to inform outer frameworks: don't treat this custom element as one of your own components, it's handled by something else (Vue, in our case). Treat it as HTML markup.
Whichever option we choose can we make full use of features that you would use in any normal Vue application - Vue router, Vuex for state management etc (and can state be shared across those widgets)?
Yes. Whichever option you choose, you're still using JavaScript (every widget/app has unrestricted access to the entire context). You can also inject dependencies into your widgets, allowing them to communicate (by modifying the same external dependency - a router, a state management module, etc...). This is pretty much the standard mode in which every Vue instance normally operates. In simpler words, a Vue (sub-)component can function without a parent component and is, essentially, a Vue app. (or, if you prefer, every Vue app is a Vue instance and all of its sub-components are also Vue instances).
Would the widgets need to be fully styled or would it be best practice to leave all the styling of the components to the parent app (or a combination of the two)?
It's entirely your code design choice. It's easy to scope CSS in Vue. But there are great advantages in styling from above (DRY-er code). Also, having styles coming from context means less CSS rules applying, although that hardly qualifies as a performance issue. Obviously, take into consideration the answer to the first question.
My company has a few different websites, mostly with a react front end but a couple without.
We want to build a cookie bar that can just be imported and used anywhere...basically it should be framework independent and ideally an npm package.
I'm not entirely sure if this is possible but I had the idea to construct the cookie bar package with react...it would be super simple, just a few components with jsx and styling and once that is all done, use webpack to compile it all into vanilla javascript that is independent of react and can just be inserted on any site with any or no framework.
All of the html of the cookie bar (that would have originally been written as react components / jsx but then compiled into vanilla JS with webpack) which will then be injected into the html of the website where the script is included.
Is this possible?
All I can find online is people making react components as npm packages but this is not exactly what I am looking to achieve.
Thanks in advance!
This is absolutely possible.
If the target page doesn't have React in it at all, you may want to bundle it as a tiny app and mount it as in the answers here. If it does have React, you can probably find away to use the existing React by putting it on window in the other code (import React from 'react'; window.React = React.
For bundling a single component or a few components, you may have better luck with Rollup than Webpack (they have different use-cases; both are bundlers, but Rollup has some niceties for bundling libraries specifically). This example may be useful (it also includes Sass, Storybook, and some other extras that you might or might not need). This would give you more flexibility and possibly smaller bundles, but would mean you'd still need a React app to actually import and use the components, as above.
Since your project scope is quite small it should not import or embed the whole react library.
I strongly encourage you to check Preactjs (https://preactjs.com/) which lets you write your code in JSX but has a much lighter footprint (3kB atm). Your component will load way faster, especially for mobile users
Then bundling with tools recommended in the other answers (rollup is great) is the way to go
I need to be able to dynamically include react components into my project, because I want to setup a plugin system and not every user has the same plugins/components enabled. Also they are/might get too big to submit all of them to every user. I tried to find out how to do that, but it seems that React might not support that use-case.
TLDR: How do I load React components from server when needed? Do I have to switch to Angular because react has no templateUrl equivalent?
React components are defined in JavaScript files, so you can load components in just as you’d load in any other JavaScript file. If you’re not using any sort of module mechanism like RequireJS, that might be as simple as injecting a script tag into the document. If you’re using something like RequireJS, you would just tell the loader that you want an extra module loaded.
If React offers DOM reconciliation, is it possible to dynamically reload component's code and re-render it after I edit it?
I'm looking for a solution that allows me to edit JSX file, save it, and have the component update itself in the browser, without reloading the page, unmounting it or losing its state.
Ideally this should work without browser plugins.
You can use react-hot-loader, a drop-in Webpack loader that enables live editing for React components in your projects. No browser plugins or IDE hooks required.
It marries Webpack Hot Module Replacement (HMR) with React.
You can use this if:
Your React components donʼt have nasty side-effects;
Youʼre willing to switch to Webpack for modules (it's not hard to switch, see the walkthrough);
You have a spare couple of hours (minutes if you already use Webpack).
How it works:
It uses Webpack HMR API to learn about the “module update available” event.
It changes React.createClass calls to special createClass and updateClass functions that store the component's prototype and later update it with fresh version;
When all prototypes are updated, it calls forceUpdate to re-render the components.
There is a demo video, an explanatory blog post and a React tutorial app fork with live-edit configured.
And it's all vanilla JS.
You can, and I created an example project demonstrating how to create these facilities for yourself using ES5 and RequireJS - it works with React and also with Backbone - it could probably work with Angular and Ember etc, as long as you use AMD modules and RequireJS.
Here's all the information:
https://medium.com/#the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1
the basic steps are:
gulp.js watchers listen for filesystem changes
socket.io server in gulpfile sends a message to all browser clients with the path of the file that changed
client deletes cache representing that file/module, and re-requires it (using AJAX to pull it from the server filesystem)
front-end app is configured / designed to
re-evaluate all references to the modules that it wishes to
hot-reload, in this case, only JS views, templates and CSS are
available to hot reload - the router, controllers, datastores
are not configured yet. I do suspect all files could be hot reloaded with the only exception being data stores.
You can see an example project here:
https://github.com/ORESoftware/hr4R
but I recommend reading the article above first.
This is a simpler more DIY implementation of hot-reloading than using Babel/ES6 and React-Hot-Loader.
Webpack was not primarily designed for hot-reloading- if it were, hot-reloading would no longer be an experimental feature, nor would it using polling to see filesystem diffs, which it currently does (see my article).
The RequireJS / AMD spec was basically made for hot-reloading, if you think about it.
Background
I have a javascript library that runs on a customers website. This library is a mixture of standard components (error handling, message passing, etc), and per-customer based custom components (specific dom handling routines).
Problem
I am breaking DRY. For each customer, I have the same code duplicated. Since I violate DRY, I am stuck with all the pitfalls: e.g. if I need to make a change to a common component, I have to replicate that change across multiple files.
Desired Solution
I'd like to separate out all the functionality into components, and selectively choose (via build script) the components that get added into the library.
This would be somewhat similar to how Bootstrap allows you to mix and match javascript plugin functionality
Example: CustomerA's library, needs the Base Component, the Comment Component, and a custom handler to parse Google Analytics.
CustomerB's library, needs the Base Component, and a custom handler for their shopping cart experience.
I think I can do this with RequireJS, but is there a more industry standard way to build customized javascript libraries?
I came across Browserify, which allows you to use Nodejs module system to create reusable components, in addition to using NPM node modules.