search

Rostlab / JS16_ProjectF

In this project we will build a web portal for our GoT data analysis and visualization system. The website will integrate all the apps created in projects B-D with the help of the integration team assigned to Project E.
GNU General Public License v3.0
10 stars 8 forks source link

Integration of projects B,C,D #5

Closed AlexMoroz closed 8 years ago

AlexMoroz commented 8 years ago

Hello guys,

I'm Alex from Project E. And I am responsible for delivering ProjectsC from Group 10 and Project B from Group7 to you.

As written here we (Project E team) need to publish the projects to NPM, so you can upload them.

Also according to wiki you need to

Create the menus that will load the apps created in projects B-D

So, if I understood correctly, the output of projects B-D will be web pages that you need to show in your web site.

Do you have any ideas about how you will show 6 different solutions in your app? And how npm packages should be structured to make the integration easier?

mammuth commented 8 years ago

So we have two things when we speak about integration I guess:

  1. Installation / making the package available in our app
  2. Integration of an actual component in certain pages of our app

The first one can be done by packaging the project apps as npm modules.

For integrating the actual project-app with their frontend (2) in our pages there might be a couple of options I can think of:

  1. Requireing modules via Browserify/Webpack
  2. ES6 Modules
  3. Shadow DOM

Are my assumptions correct? Do you think of other options, @yashha ?

yashha commented 8 years ago

I don't have more ideas. I think their enough. ;) I only know about es6 modules yet. The rest wouldn't be a problem i'm sure you can read easily into that.

Am 6. März 2016 15:22, um 15:22, Max Muth notifications@github.com schrieb:

So we have two things when we speak about integration I guess:

  1. Installation / making the package available in our app
  2. Integration of an actual component in certain pages of our app

The first one can be done by packaging the project apps as npm modules.

For integrating the actual project-app with their frontend (2) in our pages there might be a couple of options I can think of:

  1. Requireing modules via Browserify/Webpack
  2. ES6 Modules
  3. Shadow DOM

Are my assumptions correct? Do you think of other options, @yashha ?

Reply to this email directly or view it on GitHub: https://github.com/Rostlab/JS16_ProjectF/issues/5#issuecomment-192895620

AlexMoroz commented 8 years ago

Browserify/Webpack/ES6 Modules won't work, coz we need to integrate front-end also. Shadow DOM looks possible, but I can't see any difference between it and iframe. And iframe seems shitty solution.

mammuth commented 8 years ago

Isn't it possible to export a function in the ES6 modules, that on call, render the frontend in the DOM-parent? @sacdallago do you have any suggestions or experience in how to handle this?

sacdallago commented 8 years ago

Well, commonly speaking frontend logic and frontend representation are separated when it comes to these kind of libraries. For example: projects B have to render a PLOD which is just a numerical value, but they can nicely separate the logic of the calculation from an example implementation in, say, D3, and service this example also as part of the library via shadow DOM. Examples of this are everywhere on the web, stupidly also UI frameworks such as bootstrap or semantic ui. It's definetly harder to do this for project C10, because they have already put SO MUCH effort into their UI that it would be a shame to not use it and also it is not meant to be an example of the use of their logic, but the logic and the representation are interleaved and strongly coupled together. Project E would need to come up with a way of having, for example, C10 integrated in the final website, so that it doesn't feel like they are two separate things, but that it's one continuous flow. This can be achieved for example by having a menu that renders on top of the view. The choice, though, is entirely up to you.

As to Browserify/Webpack/ES6, as @AlexMoroz says these concepts are not entirely relevant to the problem at hand. You have one layer to solve before going to that. But @AlexMoroz this should be up to your group, ask your teammates how you can do this? :) It's hard, I know, but this is the challenge for your team :)

Given all of the above, I think the choice can't be global, every library needs to be thought trough singularly.

P.S.: sorry for coming back to you so late but I opened the notification and closed the window and puff, I forgot this existed :D thank good I double check everything because I know I'm :older_man: and forgetful :D :D

AlexMoroz commented 8 years ago

The only solution I have is to convert projects B,C,D to angular directives and services, so you can easily add them with require to your project. Is it possible in React?

yashha commented 8 years ago

@AlexMoroz I searched for ways to integrate angular into react, but there is no. Because you have only one html file: What you should do is packaging your Javascript up into one file. (Browsify, Webpack) And expose us that Javascipt file and one packaged css file and a simple React component containing your html.

Any other solutions?

AlexMoroz commented 8 years ago

What do you mean by

React component containing your html

? Any examples?

yashha commented 8 years ago

Something like this: https://github.com/Rostlab/JS16_ProjectF/blob/develop/app/components/public/Start/Map/Map.jsx

yashha commented 8 years ago

Altenatively to brosify and webpakc, could you even expose a module using CommonJS. http://requirejs.org/docs/commonjs.html#intro At least I think it is possible :)

And we make an React component using your HTML, too. So you don't need to make a extra react component.

yashha commented 8 years ago

Ok angular, would work too ;) I got it working. http://codepen.io/anon/pen/ZWpaJV I would recommend not going for angular though, its a big library, which it in this case not necessary for getting the result.