DESOSA 2022

ReactJS

Figure: ReactJS

React.js is a JavaScript based Framework that handles the view layer for web and mobile apps. It allows developers to create large applications that can change data, without reloading the page. React.js is declarative, allowing for designing simple views for each state in which react will efficiently update and render only the changed components. Declarative views make the code more predictable and easier to debug. React is also component-based, which allows for encapsulated components to manage their own state, then compose them to make complex UIs. The main purpose of React.js is to be fast, scalable and simple.

Project Site | Project Source

Authors

Jeongwoo Park

MSc Computer science student following Data Science and Technology Track

Budi Han

MSc Computer science student following AI Track

Mirijam Zhang

MSc Computer science student following Data Science and Technology Track

Jahson O'Dwyer wha Binda

MSc Computer science student following AI Track

ReactJS - Scalability

In the previous three posts, we have discussed the vision, architecture, and software quality of ReactJS. ReactJS is one of the most used front-end JavaScript frameworks. Since many people access ReactJS every day via their web browsers, it is crucial for developers to make sure that their ReactJS application is scalable in terms of time and space performance. In this last post, we discuss the main elements that affect React App’s scalability and its performance and also analyze the changes that can be made to those applications.
ReactJS
March 27, 2022

ReactJs - Quality And Evolution

ReactJs - Quality And Evolution In one of our previous posts, we briefly described what the key quality attributes are and explored how ReactJS realizes these key concepts through its component-based architecture. In this post, we focus on the means to safeguard the quality and architectural integrity of the underlying system. System’s key quality attributes There are two perspectives on how key quality attributes can be realized. The first perspective is from the end-user’s point of view in which web developers use the ReactJS framework.
ReactJS
March 16, 2022

ReactJS - From Vision to Architecture

Architectural style and patterns ReactJS does not enforce a particular way to organize and structure the codebase of a web application. Beyond some design principles and recommended file structure, the developer is completely free in how to use React. The versatile nature allows a developer or team of developers to decide on their own architectural patterns. However, a project with no structure means that everyone can do whatever they want. Thus, developers must decide on their architectural structure to keep the project productive in the long term and to make the codebase easy to navigate, modify and scale.
ReactJS
March 13, 2022

ReactJs - Product Vision and Problem Analysis

React.js React, (also known as ReactJS or React.js) is a popular free and open-source front-end Javascript framework that is used for building UI components and user interfaces. The framework was constructed by Jordan Walke together with FaceBook in early 2011 which then carried the name “FaxJS”. It is still maintained by FaceBook with an ever-growing community of developers and companies. To this day, React is one of the leading front-end frameworks together VueJS and Angular 1.
ReactJS
March 6, 2022

Contributions

Add Table of Contents

facebook/react

We propose a simple Table of contents at the top of the React Readme to allow for easy and quick navigation to relevant sections of the README. We think this addition gives clear navigation to first users of React. Once this is approved, we are planning to add more ToCs to other documentations existing in React repository.

open
Open PR

Fix small grammar mistake

facebook/react

React has a separate repository for documentation. Currently, React is building a new documentation which aims to be more beginner friendly. We spotted few grammar mistakes and made a PR regarding those.

open
Open PR

Merge & Rmv unused and duplicate style selector

facebook/react

After running code-quality analysis tool SonarQuabe , it pointed us to multiple bad code-smells in the React project. This PR is to fix some in the time-slicing directory. Code Smells Resolved:

  • Empty CSS selector (.archand)
  • Duplicate CSS selector (label)
closed
Open PR

Refactor attribute behavior

facebook/react

After running code-quality analysis tool SonarQuabe , it pointed us to multiple bad code-smells in the React project. This PR is to fix some in the attribute-behaviour directory. Code Smells Resolved:

  • Removed Useless Variable assignment
    • ssrHasSameBehaviour is immediately reassigned outside of the if statement.
  • Immediately returned completedHashes rather than assigning then returning the variable.
  • Replaced for loop with for-of loop to improve readability.
  • Removed unused import createElement
closed
Open PR

Refactor duplicate test code.

facebook/react

After running code-quality analysis tool SonarQuabe , it pointed us to multiple bad code-smells in the React project. This PR is to fix some in the nested-acts.js tests directory. Code Smells Resolved:

  • Refactored duplicated code used in the two test cases to a single function which the tests call. To improve readability and make it more modular.
closed
Open PR

Refactor standalone smells

facebook/react

After running code-quality analysis tool SonarQuabe , it pointed us to multiple bad code-smells in the React project. This PR is to fix some in the devtools/standalone directory. Code Smells Resolved:

  • Removed duplicated .IconButton selector which also had duplicate style rules.
  • Removed any type annotation used outside of a Typescript file.
closed
Open PR

Refactor triggerErrorAndCatch function

facebook/react

After running code-quality analysis tool SonarQuabe , it pointed us to multiple bad code-smells in the React project. This PR is to fix some in the fixtures/error-handing/index.js directory. Code Smells Resolved:

  • Refactored duplicated code.
    • triggerErrorAndCatch() was function identical in 2 places in the file. It’s been refactored to a function and called when needed. To improve readability and maintainability.
closed
Open PR

Revert - Remove object-assign polyfill

facebook/react

It was not possible to build in React Main branch, and the team found that from this PR, build started to fail. Based on the comment, it seems like it is only happening in Windows and also found out that React development environment is mainly focused in OS and Linux, not Windows.

Closed
Open PR