Add sub-generator for React components #12

cmelion · 2016-03-11T01:13:48Z

A sample React component integration has been added to the Home component.
There are a ton of nice React widgets out there so why not use them?
As a complete framework Angular 2.0 makes a great hosting environment for any view component and that includes React.

Provide a sub-generator to produce a NG2 wrapper component in the form of a TSX file.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/31774430-add-sub-generator-for-react-components?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

kuncevic · 2016-03-11T01:53:33Z

That is an interesting idea but would it be to heavy to reference angular2 and react that as a result might affect page load ?

cmelion · 2016-03-11T03:01:06Z

I would probably think twice about loading both in an app that was targeting a mobile audience, but I have a few thoughts about it:

I'd probably avoid loading react in the Home page and lean towards bundling and loading via async routes.
React by itself is not a complete framework, you would probably bring in 10-20k of support libraries that are being replaced by Angular.
Way too many people are still using full jQuery with both React and Angular which is just as heavy, if not more so, when compared with either React or Angular.
It's still way smaller than a typical Flash application
For certain applications, the size of both libraries is dwarfed by the size of data and media resources used.
It remains to be seen how big the Core Angular distribution will be once the final product is released.

cmelion · 2016-03-11T04:11:00Z

@Kuncevich I put up a live version @ http://cmelion.github.io/generator-ng2-webpack/

It's pretty snappy on my iPhone6S. This is the default build without much effort put into tuning but it's also barebones from a source code and third-party widget perspective, so a real app would be considerably larger.

Again, I would probably break it up into route specific bundles and async load them.

cmelion · 2016-03-11T10:49:06Z

Another approach to addressing the concerns of bloated js payloads is to investigate how well the combination of Angular and React lends itself to isomorphism (use arrow keys to navigate slides). The perceived load time for isomorphic apps is typically much faster, for compile time pre-rendered pages, even more so.

kuncevic · 2016-03-11T13:14:23Z

That is result in chrome dev tools loading http://cmelion.github.io/generator-ng2-webpack/

That is results running locally with npm start http://localhost:8080/

probably webpack-dev-server is not a case for testing the performance but just cant understand why it browser doing 20 requests to load just these:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
    <title>ng2-webpack</title>
    <base href="./">
  </head>
  <body>
    <app>Loading...</app>
  <script src="/js/common.js"></script><script src="/js/vendor.js"></script><script src="/js/app.js"></script></body>
</html>


<!DOCTYPE html>
<html lang="en">

cmelion · 2016-03-11T13:43:57Z

That is strange I only see 6 requests, what is the latency on your requests?

Also the byte counts look wrong (I show 370kb compressed or about 1.5M uncompressed), you must be pulling from cache?

I was publishing the sourcemaps until just recently, can you check again?

I see all the js loading in < 200ms and the png file coming at around 640ms
There is a big parsing delay maybe 400ms, what kind of machine are you testing on?

cmelion · 2016-03-11T13:53:31Z

@Kuncevich Wow! It's taking 4 seconds for the content to be pulled from cache and parsed!

I expect the initial load in localhost environment to slower since the uncompressed resources are being loaded as well as source-maps. But since hot-loading is configured, you don't have to reload everything to see your changes so it should be fast.

I don't expect the github demo link to be that slow, can you clear your cache and let me know what things look like now? I don't have appcache or cache-buster configured yet.

cmelion · 2016-03-11T14:23:26Z

@pavanpodila You were looking at the large payload earlier, any progress?
I'm going to move the react payload into an async route some time today and see what that buys us.

pavanpodila · 2016-03-11T18:15:57Z

Not much to do at this point. I've heard the angular team will make it smaller than ng1 after release. Let's wait for that. Minified builds still hit 700+kb

kuncevic · 2016-03-11T22:28:25Z

Just being fooled by Evernote extension that always loaded 11 scripts on each page!

https://discussion.evernote.com/topic/62215-feature-request-disable-web-clipper-when-inspector-is-open/

So after disabling Evernote the thing looking much better:

@pavanpodila yeah I also heard that they will be working on reducing the angular2 size

cmelion · 2016-03-14T03:25:11Z

F.Y.I. React integration has been moved into the async about route: http://cmelion.github.io/generator-ng2-webpack/about

kuncevic · 2016-03-14T03:54:45Z

Just wondering is there any specific cases when you would use React component over Angualr 2 component? Or the idea is to just to be able to reuse any existing React components without spending time on converting to Angular2 component?

cmelion · 2016-03-14T04:06:17Z

Over the last year we've invested a lot into React components. So switching to NG2 is a little more palatable if we demonstrate that said components can be plugged in seamlessly.

JSX also has some attraction as well, see angular/angular#5131

cmelion · 2016-03-14T04:10:01Z

As well, it will be some time before the vast number of Angular 1.x and React components can be ported to native Angular 2.

cmelion · 2016-03-14T12:58:21Z

Setting mangle to true reduces the overall app size by ~400k or about 2/3 of the original size.
But it breaks the navigation links. Thought the app itself seems to work fine if you navigate via the address bar.

            new webpack.optimize.UglifyJsPlugin({
                // Angular 2 is broken again, disabling mangle until beta 6 that should fix the thing
                // remove this with beta 6
                mangle: false
            }),

see: angular/angular#6678

PavelPZ · 2016-03-15T00:42:52Z

React components in angular2? It could solve #2753, #7596 too!!!

cmelion · 2016-03-15T00:52:21Z

@PavelPZ: oh, interesting. I used to use ng-include extensively back in the 0.9-1.3 days. I've since embraced component based architectures and haven't had a use case that required the dynamic features that ng-include provided. I'd be interested in seeing how this would be achieved with React!
Can you put together a small demo? I would like to add it into the sample app I plan on linking to from the generator repo.

PavelPZ · 2016-03-15T01:14:57Z

I have tens of thousands of XHTML markup files, containing eLearning exercises (with GapFill, Pairing and other eLearning activity components).

In angular1 (ngInclude) and react (JSX/TSX template, which is just JavaScript object) I can take this markup and display it in the browser (in single special Exercise component). In angular2 I must create a component for every exercises and put it to the ES6 module. I cannot image ES6 module with tens thousands of components...

I think that TSX (template as strictly typed Typescript object) is one of the most advanced React feature (Angular will not use it, see #7339).

cmelion · 2016-03-15T01:29:49Z

I prefer TSX as well for purposes of code coverage. Have you looked at the generated React sub-component (recently moved to the About component)? The generated project allows use of TSX with React.

PavelPZ · 2016-03-15T01:52:10Z

Not yet, I will come back later.

cmelion · 2016-03-15T01:57:34Z

http://cmelion.github.io/generator-ng2-webpack/about

If you open up the React debug console in chrome tools you can inspect the embedded React component. The notifications are transient but if you're quick, you can inspect them too.

cmelion added the enhancement label Mar 25, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add sub-generator for React components #12

Add sub-generator for React components #12

cmelion commented Mar 11, 2016 •

edited

Loading

kuncevic commented Mar 11, 2016

cmelion commented Mar 11, 2016

cmelion commented Mar 11, 2016

cmelion commented Mar 11, 2016

kuncevic commented Mar 11, 2016

cmelion commented Mar 11, 2016

cmelion commented Mar 11, 2016

cmelion commented Mar 11, 2016

pavanpodila commented Mar 11, 2016

kuncevic commented Mar 11, 2016

cmelion commented Mar 14, 2016

kuncevic commented Mar 14, 2016

cmelion commented Mar 14, 2016

cmelion commented Mar 14, 2016

cmelion commented Mar 14, 2016

PavelPZ commented Mar 15, 2016

cmelion commented Mar 15, 2016

PavelPZ commented Mar 15, 2016

cmelion commented Mar 15, 2016

PavelPZ commented Mar 15, 2016

cmelion commented Mar 15, 2016

Add sub-generator for React components #12

Add sub-generator for React components #12

Comments

cmelion commented Mar 11, 2016 • edited Loading

kuncevic commented Mar 11, 2016

cmelion commented Mar 11, 2016

cmelion commented Mar 11, 2016

cmelion commented Mar 11, 2016

kuncevic commented Mar 11, 2016

cmelion commented Mar 11, 2016

cmelion commented Mar 11, 2016

cmelion commented Mar 11, 2016

pavanpodila commented Mar 11, 2016

kuncevic commented Mar 11, 2016

cmelion commented Mar 14, 2016

kuncevic commented Mar 14, 2016

cmelion commented Mar 14, 2016

cmelion commented Mar 14, 2016

cmelion commented Mar 14, 2016

PavelPZ commented Mar 15, 2016

cmelion commented Mar 15, 2016

PavelPZ commented Mar 15, 2016

cmelion commented Mar 15, 2016

PavelPZ commented Mar 15, 2016

cmelion commented Mar 15, 2016

cmelion commented Mar 11, 2016 •

edited

Loading