Public
April 24th, 2023
Richard Všianský, SAP
ReactJS
and Web Development
2Public
- Senior Frontend Developer at SAP Signavio
- 4+ years of experience with React
- 7+ years of experience with Web Development
- Master‘s Degree from Mendel University in Brno
- Maintainer of Data Driven Forms library
Presenter: Richard Všianský
3Public
D E V E L OP ME N T
L OC A L IZ A T ION
S OF T WA R E MA IN T E N A N C E
SAP Labs Czech Republic
4Public
1) Introduction to React
2) Model View Controller Pattern and React
3) Advanced usage of React
Agenda
5Public
- An open-source JavaScript library for building user interfaces
- Declarative
- Component-based
- First public release in 2013, released by Meta (Facebook)
- Most used front-end framework
- Web and mobile applications
React
6Public
- Components = functions / class components
- Components consists of elements (HTML, components)
- State
- “internal“ attributes of component
- Props
- “external“ attributes of component
- parameters of function
Component is re-rendered only when state or props are changed / or when parent component is re-rendered
React – Component-based
7Public
8Public
- Template (HTML) and logic (JavaScript) in one file
- Not required, React can be used without it (not recommended)
JSX
9Public
- Passing properties to components
- Can use propTypes for typing
Props
10Public
Conditions, Children and Default Props
11Public
Loops in JSX
12Public
Event Handling
13Public
- Used to manage component states, trigger side-effects
- Lifecycle methods
- Used in Class components only
- Can be replaced by Hooks (only ComponentDidCatch cannot be)
- High-order components
- A component that returns component
- To share functionality
- Hooks (recommended)
- Used in Function components only
- Introduced in React 16.8.0 (February 2019)
- Shared functionality across components
Hooks and Lifecycles Methods
14Public
- constructor()
- Binds methods, sets props
- render()
- componentDidMount()
- Called after component is inserted into the DOM tree
- Usually used to load data from network
- componentWillUnmnout()
- Called before component is destroyed
- Usually used to clean subscriptions, cancel network requests
- Check other methods
Lifecycle Methods (obsolete)
15Public
Stateful Class Component Example
16Public
- useState, useReducer
- To initialize and store inner variables (state)
- useRef
- To create an object that persists for the fulltime of the component
- useEffect
- Triggers side-effects according to changes of dependencies
- Replaces componentDidMount, componentDidUnmount, componentDidUpdate
- useContext
- Accessing outside context
- Check other hooks, comparison with LifeCycle methods
Hooks
17Public
Stateful Function Component Example
18Public
- A function calling other hooks
- To share functionality across components
- The name of a custom hook has to start with `use` (e.g. useLoadData)
Custom Hooks
19Public
Link to code
20Public
- A virtual DOM – a representation of React components tree
- Changes are first done in ReactDOM and after their comparison, they are rendered in DOM
ReactDOM
Model-View-Controller and React
22Public
- A software architectural pattern used for developing GUI applications
- Separation of concerns
Model-View-Controller
https://helloacm.com/model-view-controller-explained-in-c/
23Public
- Manages data and logic – validation, saving, updating
- e.g. a table in database, ORM model, …
- Object-relational Mappers
- A class in code represents table in the DB
Model
24Public
- Receives input from View, updates Model and returns data to View
- Does not know how to handle data
- Sometimes called Presenter
Controller
25Public
- Displays data to users
- UI application (frontend)
- HTML, JavaScript, CSS => REACT
View
26Public
- Model/Controller is usually one application
- “Model” sometimes refers to a database
- e.g. In Rails Models and Controllers are different classes
Model vs Controller
27Public
- MVC frameworks
- One application handled data, logic and presenting them to users (Monolith application)
- HTML templating (ERB, Haml)
- Ruby On Rails (2004) – Ruby
- Django – Python
- Laravel, Nette – PHP
- .NET – C#
- Spring - Java
MVC in Past
28Public
- Backend contains presenters + models
- Handle users input and updates data
- Usually one backend application (Java, PHP, Python, …)
- Frontend (UI) displays data to users
- Usually one (React) application
- Frontend communicates with backend via API
- Sends data
- Receives data
- No HTML templating
- REST API / GraphQl / RPC
MVC Today
29Public
- Usually one client, multiple backends (up to 100+)
- Each backend has own database, handles specific functionality
- Microservices interact with each other
- Each MS follows MVC pattern
Microservices
Recommended movies
Streaming
Subscriptions
30Public
Twitter
31Public
- An approach to bring Microservices architecture to Frontend side
- One client consists of several UI applications
- Teams can use different frameworks, not blocked by others, code is separated
- Mostly used for code separations…
- Using different frameworks is not scalable (sharing components, knowledge, programmers)
- Frontend parts usually interact a lot with each other
- Serving different applications can increase application size
Microfrontends
32Public
- Example https://github.com/rvsia/vut-2022-react/tree/main/02-mvc-integration
- Movie database web application
- API REST connection
- Custom local server with in-memory database
- Create and update movies
- Includes pagination, filtering
MVC Example Using React and NodeJS
Common and Advanced Usage of React
34Public
- Inline styling
- CSS/PostCSS/SASS
- Using className prop
- JSS (CSS-in-JavaScript)
- Multiple libraries
React and CSS
35Public
- Only reloads data, page is not refreshed
Routing – Single Page Application
36Public
- Package management
- Using open source / private packages
- Contains scripts, configuration of the project
- NPM, YARN, PNPM, Bower (obsolete)
- Dependency tree
- Bundlers
- Bundle JS, HTML, CSS and other resources altogether
- Webpack, Snowpack, Vite, Rollup, Parcel
- Uses Compilers to enhance JavaScript language (Babel)
- Allows to use new features not supported by all browsers
- Minifiers to make code/resources smallers
- It is possible to use React without a bundler (not recommend)
Packages Management and Bundlers
37Public
- To share data across components
- Allows to pass data from bottom to top
- React Context
- Simple, not optimized
- React Redux
- The most used library
- Optimized
- Old, needs a lot of boilerplate
- Recoil
- Developed by Meta, atomic approach
- Hook based libraries
- Zustand
Global State Management
38Public
Zustand Global State Example
39Public
- Similar to global state, only on form level
- Performance optimization
- Form state: values, dirty, validation, conditions, …
- Handles event
- Based on field configuration libraries
- Formik, react-hook-form, reactfinal-form, Unform, @shopify/reactform, felte, …
- Based on schema defined forms
- Data-driven-forms, uniforms, React Json Schema Form, Winterfell
Form State Management
40Public
- Unify using of API across UI application
- Cache, validation, global store management
- Apollo GraphQl
- For GraphQl requests
- Axios
- Enhancement of the default window.fetch API
- SWR
- Pagination, polling, cache, optimistic UI, …
API Management
41Public
- Already implemented and designed components
- Rapid development, prototyping, production development
- MaterialUI, React Bootstrap, Ant Design, BlueprintJS, …
Design System Libraries
Material UI
Ant Design
BlueprintJS
42Public
- Browser tools for debugging React application
- ReactDOM overview and Components inspector
- Can check and change props, state
- Profiler
- To track performance, rendering times
React DevTools
43Public
- React can be also rendered on server
- Faster performance for users (only receive HTML), frontend directly accesses database and
backend, better for SEO
- Components can still stay dynamic – in that case JavaScript is still sent
- NextJS, Remix
- React Server Components
- Experimental
- Streamed to browser, not just HTML, all the functionality is kept on server
Server-side React Frameworks
44Public
- Use React Testing Library for Unit testing
- To test functionality, not styling
- Runs in Node, not in a browser
- Quick and cheap
- Use when developing
- Jest runs tests, RTL renders them
- Enzyme is no longer supported!
- Cypress component testing
- Runs in browser without backend
- Slower
- E2E tests (Cypress, Playwright, …)
- Runs in browsers with backend connected
- The slowest approach
- Use when approving code/changes
Testing React
45Public
- React can be slooooooow
- Optimize:
- Rendering
- Memoization (components are not rendered when props are not changed)
- Subscription rendering (components are rendered only if their subscribed state is changed)
- Debouncing (when typing, state/functionality is not triggered on each key stroke)
- Bundle size
- Tree shaking (not used components are not bundled in the code)
- Code splitting (components are loaded only when needed)
- Computation
- Memo values (computed values are re-calculated only when a dependency is changed)
- Cache values (do not recompute functions for the same values)
React Optimization
46Public
- React can be also used to develop native iOS and Android applications
- Instead of HTML elements it uses native elements of each system
- Slower than truly native applications, but codebase can be shared across platforms
React Native – Mobile Applications
Same component, different look
Not using HTML elements
47Public
- Pipelines to automatically build, test and deploy applications
- CircleCI, Jenkins, Travis CI, GitHub Actions, …
CI – Continuous Delivery
48Public
- React and Typescript can be used together
- Providing typing to components
React and TypeScript
49Public
- MVC and templating frameworks
- Obsolete, but still used
- See MVC frameworks
- Other JavaScript frameworks
- Vue – more developer friendly
- Angular – includes more features, enterprise ready
- Svelte – small community, similar to vanilla JS
- SolidJS – similar to React, still early
- WebAssembly
- Native code compiled to WebAssembly
- Fast performance, still early to use
- Blazor (.NET framework)
Alternatives
50Public
- Official documentation: https://reactjs.org/, https://react.dev/
- YouTube
- https://www.youtube.com/c/TheoBrowne1017
- https://youtu.be/rzwaaWH0ksk
- Books
- https://www.roadtoreact.com/
- Eloquent JavaScript
- Open source projects
More Resources
Thank you.
Contact information:
© 2022 SAP SE or an SAP affiliate company. All rights reserved. See Legal Notice on www.sap.com/legal-notice for use terms, disclaimers, disclosures, or restrictions related to SAP Materials for general audiences.
richard.vsiansky@sap.com
Richard Všianský