Propose suitable technologies

[mariobehling]

For FOSSASIA and OpenTechSummit we used the open event scraper, where a JSON file is used to generate the a web app. We want to continue in this way and generate events with this script. Another goal is to make the web app themable. An organizer user could choose a theme and color and the app is generated with this theme. The app can then be downloaded as a zip file or as done with the Open Event Scraper be deployed on GitHub.

To enable this workflow and follow the user story (https://github.com/fossasia/open-event-webapp/issues/200), please propose suitable technologies. Do we still need AngularJS in this case?

[championswimmer]

First question to answer will be if or not to be a single-page-application.

Pros of SPA are -

• No need of generator
• Won't need any computer to run on to generate. Can be hosted on github pages or bitballoon
• Use cache manifest to cache all js css html files, so only data is loaded from second visit.
• Can leverage the localStorage and localDb browser apis to cache data for offline viewing. Like the Android app uses versioning api.

If we do go with SPA, we'll have to use a webapp framework like ember or Angular or React+Redux.

I have learnt from GSoC2015 to stay away from Angular1. For large lists it'll be slow, and there are no easy ways out of it. So we have to look at a framework that has DOM diff or virtual DOM or shadow DOM.

Even if we make an SPA, each session, speaker etc should have unique URLs (for sharing), for which we can use hash routes, or the new pushState() or histort API.

Finally, whatever framework we use, we are not to theme the frontend using framework features. This leads to the current situation where we are too tightly bound to Material. Instead our generator (for non SPA) or our framework should only spit out html, with our custom class markups like session-list or speaker-card and our CSS will style it as per that markup.

[niranjan94]

+1 for a SPA.

As for the framework, I found Vue.js to be quite good. Vue.js along with webpack would be a good choice. It is very light (so much more lighter than Angular and has a much better performance even with large datasets) and has most of the core reactive features of React. And there is vuex similar to Flux or Redux that has been made for Vue.js.

[aayusharora]

+1 for a SPA . According to my views , I can have some options

1. SHIFTING FRAMEWORK

PROS

1) React can have good scope for large projects .

2) I have gone through various articles online and find out that React is for larger projects and Angular is for fast development .

1. NOT SHIFTING FRAMEWORK , REUSING CODE PROS a) Continuing with Angular is advantageous , to reuse some of the code , not binded with Material. Let say Twitterwall , No component of it is binded with Material .The Services even "ApiJsonFactory.js" , TwitterJSONFactory.js can be reused .

   b) All we need to add the directives and replace the views .

   c) Taking the theme part into consideration ,I was thinking to bind the data dynamically with "choose theme option" after the Server UI wizard is completed by the organizer .

3 . Considering @niranjan94 idea for Vue.js , can be an option that also will be considered in the point (1).

[juslee]

To paraphrase @mariobehling:

• Read a JSON file (either from the REST APIs or from a downloaded file)
• Web App to read the JSON (it doesn't matter from where, create 2 modes - If file exist, read json file, otherwise if URL exist, call REST API) and display a standard UI and layout
• Web App to have color schemes

Web App to have 2 modes - Hosted (on our servers), and On Prem (downloaded and hosted on their servers).

Does that make sense? @championswimmer and @aayusharora

[championswimmer]

@juslee That makes sense now much more than before.

We will start working on the basic version that satisfies these three points ASAP.

[championswimmer]

I have had a call with @aayusharora today.

We have concurred on division of labour this way - I'll be taking up everything coming under labels config and dataapi now. @aayusharora will be working on displaying data and the styling

Getting the Data

Two modes -

• From an API (like the orga server)
• From pre-generated JSON files

These two modes shall be transparent to the view-rendering layer. I'll make a openevent.js library, that shall have calls like OpenEvent.getSessions() The library internall will handle any of the two above cases as per the configuration of deployment.

Displaying the data

We'll use a SPA framework (Angular2 is what we concurred upon) for displaying of the data. @aayusharora is creating the wireframes right now, and will get on with integrating with Gentelella.

I'll start making issues for all the tasks in hand.