ReactFoo 2017

A conference on React

Akshay Verma

@akshayverma295

Lessons from building React app to Visualize Data

Submitted Jul 27, 2017

React ecosystem has been gaining immense popularity among the front-end developer community. Despite the popularity, React ecosystem still lack good and diverse content that cover multiple aspects of development that serve multiple avenues. Frameworks, Design patterns are still in their early stage. In absence of these, I propose to talk about the lessons learnt on the journey of building Story Generator an app to visualize budget data for the different states in India..The lessons are picked at different stages of development

#####The talk covers multiple aspects of React development.

  • A very brief introduction about React and where it stands in your stack.
  • Hurdles in getting onboard with React.
  • Design characteristics of React Components.
  • Tradeoffs to consider on a tight deadline.
  • Designing with Data.
  • Visualization in React. Pros and Cons.
  • State of visualization libraries in React.
  • Using React to build Standalone apps.

The key takeaway for the audience would be to get an experience of building a standalone sustainable open source React App based upon rich data. The talk will be structured around three major components- Data, App Development Design and Visualization.

The talk will be suitable for people who have amateur experience in React and pushing towards working on projects.

Outline

The talk would be based on the project Story Generator - Open Budgets India.The objective will be to take the audience through the journey of building the app through different stages and the lessons learned through the app.The following highlights how the talk would be structured.

###Introduction - 2 - 3 mins

  • The talk will begin with a very brief and basic introduction about the project - Story Generator, highlighting the project’s inception, the development team, general working of the app, tight deadlines, development background which sets the basis for the plot.

###Initiation process to the React Ecosystem - 3 mins

  • The talk will proceed to the experience and the challenges of stepping in the React Ecosystem especially within a short span of time. This will range from finding the right set of materials to read and practice to adopt. Emphasis would be given on the aspects which are generally not covered in the courses. Lastly an evaluation whether React sits appropriately in your tech stack.

###A brief journey of early iterations of development - 5 mins

  • Next I will be covering the experience of building the app for the first time. Multiple aspects would be discussed which starts from the brainstorming about the design of the whole app at architectural level in absence of a detailed design philosophy or a framework , working in tight deadline without headway and ends with getting a working app to production and everything in between.

###Decision that are needed to be made before starting - 3 mins

  • Parameters they don’t tell that you have consider before starting. Some 50 different parameters can be required for a high quality app but that is what often missed. What happens when you ignore those and when do they affect.

###Design philosophies and general characteristics of React components - 5 -7 mins

  • The general design philosophies that are making their way into React ecosystem. This part will also cover the characteristics of React components that decide the tradeoffs that come with it. Development always comes with deadlines and their associated tradeoffs. This section will also covers how data affects the component design.

###Visualization in React Ecosystem - 5 mins

  • This part will emphasis the state of visualization libraries/components in the React Ecosystem. How does React and D3 fit with each other. Weighing pros and cons of React for visualization.

###Open Source, Open Data and Open Community - 3 mins

  • The last part will cover briefly about the initiative - Open Budgets India. I will briefly talk about Open Data and its impact. How Open Source can help evolve the initiative and the roles communities can play.

###A short Q&A to end the session.

Requirements

No requirements.

Speaker bio

Technologist. Working with CBGA - New Delhi to build OpenBudgetsIndia(About the initiative - Link). Data Science enthusiast with previous experience in Web Development and User Experience. Likes to build products which combine the three - Data | Web | UX.
Previously a co-organiser of a tech community - Google Developers Group-Indore.

Slides

https://docs.google.com/presentation/d/1jFxc511i6u1s6KF8ifpECiOLDjxg0Il05qp8jhlxh0c/edit?usp=sharing

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

A community - for and of - front-end engineers to share experiences with ReactJS, performant apps with React, crafting better User Interfaces (UI) with React and GraphQL ecosystem. ReactFoo also discusses design patterns and user experience. more