1
Let’s mix some HTML and JS together
JavaScript
& React basics
2
Agenda
History of Javascript - the old and the new
What do we need to create a web UI?
Tools and technologies
New goodies in JavaScript
Web UI key principles
React basics - props, state, component lifecycle
Project setup
3
React
A JavaScript library for
building user interfaces
Uses Shadow DOM
2006-03-22
jQuery
The most ❤ and 💩
DOM manipulation library
ES6
Big improvement to JS
Prepared for many years
Introduces a lot of new features
2013-05-29
2015-01-12
Babel
Previously known as 6t5 babel
Transpiles new JS to old one
2015-06-17
JavaScript Dark age ended like 10 years ago…
Javascript practices - old and new
2016+
ES7 end ES next
From now on ES committee
creates every year new
standard
1995
Brendan Eich
Javascript practices - old and new
4
What do we need to create a web UI?
● web browser (see the page & debug)
● code editor (VS code)
● programming language (JavaScript)
● library to help us create the app (React)
● package manager (NPM)
● transpile new code features for older web browsers (Babel)
● bundle JS in a single file (Webpack)
● deploy the app (OpenShift, Surge)
Javascript practices - old and new
5
https://en.wikipedia.org/wiki/Ajax_(programming)
Ajax (Asynchronous JavaScript and XML)
● Also known as XHR (XMLHttpRequest)
● At first used to exchange XML documents (Extensible
Markup Language)
● Asynchronously exchange data with server
● No longer needed to reload entire page just to get
the data
● Need for clever way how to identify user
● Polling was used to update data on the fly
Javascript practices - old and new
6
Single session
● User logs in and is given a specific ID on server called session ID
● User performs asynchronous operations
● Once user is done, browser is closed and server resources are cleaned
● Resources consuming
● User has to log in every time new browser is opened (if application allows that)
● Session hijacking (no need to know the password, just listen on specific events
and get the session ID)
Javascript practices - old and new
7
Single sign on/out
● Transfers the need of tracking the log-in state
from server to browser
● Better user experience - no need to log in for each
application
● Allows you to login with social media and other
providers
● Allows user to automatically log out of all devices if
there are some suspicions
● Uses JWT and Oauth 2
● JWT - header, pyload and signature
● Oauth 2 - protocol for authorization
● Multiple services to take care of for us
○ Keycloak, Auth0
Javascript practices - old and new
8 https://www.w3counter.com/globalstats.php
Internet explorer was the master
● First there was Netscape
● Internet explorer followed and gained a lot of
traction because they were improving browser API
and were the leading giants
● IE used to had some quirks in order to support
their paid customers and these changes were not
adopted by other browsers because they were not
standardized
● Firefox was at that time heavily improving
standards and adopting them
● Opera and Chrome followed
● Now Chrome has the leading (63.56%) followed
by Safari (19.85%) with IE and Edge on third place
(5.43%)
Javascript practices - old and new
9
jQuery
● Easy to understand wrapper around JavaScript
● In its prime, it was the most used JavaScript library
● People could program in jQuery, not JavaScript
● To this date, for many people it is still a go to library when they need some quick prototype
● With the evolution of the language “$” is becoming obsolete
● And here is why:
el.classList.add('show');
el.classList.remove('hide');
.show {
transition: opacity 400ms;
}
.hide {
opacity: 0;
}
$(el).fadeIn();
Javascript practices - old and new
10
New vs old
Javascript practices - old and new
11
New is always better!
Javascript practices - old and new
12
Variables and their scoping - old and new
● Global - var
○ Variable leaking
○ Variable overriding
● Local scope - let and const (new way)
○ let - can be changes, meaning its data type
and value can be changed
○ const - can’t be changed, meaning its data
type can’t be changed but inner value can
const myVariable = ‘hello’;
// error!
myVariable = ‘something’;
const otherVar = { foo:
‘bar’ };
// correct!
otherVar.foo = ‘baz’;
Javascript practices - old and new
13
Callback hell
● A way how to execute some code after
asynchronous action happened
● Chain functions together
● Choose function based on some conditions
Javascript practices - old and new
14
Callback hell
● A way how to execute some code after
asynchronous action happened
● Chain functions together
● Choose function based on some conditions
Javascript practices - old and new
15
Callback hell
● A way how to execute some code after
asynchronous action happened
● Chain functions together
● Choose function based on some conditions
// first we must get user by id
const hotcakes = await
CallEndpoint('/api/getidbyusername/hotcakes' );
const followers = await CallEndpoint('/api/getfollowersbyid' );
const other = await CallEndpoint('/api/someothercall' );
const another = await CallEndpoint('/api/someothercall' );
const andOther = await CallEndpoint('/api/someothercall' );
Javascript practices - old and new
16
Transpilers
● Transpiler is a tool, that takes a code written in one language and transforms it into a
different language (or different version in some cases)
● Due to browser backwards compatibility we can’t just use the latest features of JS. They
would not work.
● Code has to be transformed into something browsers understand
● There are also many variations of the language that will never be supported in browsers.
Yet we want to use them.
○ JSX
○ Typescript
● JS is becoming more and more compiled language
● Many speak of an “Age of a Transpilers”
Javascript practices - old and new
17
Transpilers
● Transpiler is a tool, that takes a code written in one language and transforms it into a
different language (or different version in some cases)
● Due to browser backwards compatibility we can’t just use the latest features of JS. They
would not work.
● Code has to be transformed into something browsers understand
● There are also many variations of the language that will never be supported in browsers.
Yet we want to use them.
○ JSX
○ Typescript
● JS is becoming more and more compiled language
● Many speak of an “Age of a Transpilers”
Javascript practices - old and new
18
Type checkers
● Typechecker is a tool to help developers keep code stable by introducing types
● Since many languages (JavaScript included) have no types it can be hard to do complex
features
Javascript practices - old and new
19
Type checkers - Typescript
● > TypeScript is a strongly typed programming language that builds on JavaScript, giving
you better tooling at any scale.
● Created by Microsoft, very similar to c#
● First introduction to classes - JavaScript has no understanding of classes, even new
classes are just syntax sugar
○ Adds option to private and public properties
● Generic types
○ Really powerful, but hard to understand
● Type checking when building your application
Javascript practices - old and new
20
JS is slowly moving towards functional programming
● With a release of ES6 (ES2015) JS specification the language drastically shifted towards
functional programming
● Introduction of lambda functions, many many new prototype functions
○ Prototypes (Array, Object, Map, Set, ...) received a huge upgrade when it comes to natively
supported functions which were previously only possible thanks to certain libraries. (Map,
Reduce, Entries, ...)
● There are whole frameworks based on FP and shifting away from OOP
● There are also many JS extensions which are based entirely upon FP
○ RxJS, CircleJS, LodashFP, Ramda
● Can fully replace Objects with closures and composition
Although there are some who don’t like this that much
Javascript practices - old and new
21
https://www.ecma-international.org/
Improved Browser API
● Browsers (not IE) have transformed significantly in a past few
years
● Most of the are actually following and keeping up with ECMA
(Javascript) specifications
● Many JS utility libraries are becoming obsolete because
browsers support is getting better and better
● Browsers support I18N (Internationalization and localization)
natively
● And many more
○ Browser plugins
○ Security
○ Performance
○ Debugging tools
Javascript practices - old and new
22
Build tools - module based codebase
● Script tags are the history, now you need only one and the rest will be loaded
on demand
● Move from CommonJS to MJS
○ You can now actually reference a different module from JS file in a
browser?!. (import/export)
● We no longer need global variables everywhere
● JS is sadly becoming compiled language (Thanks IE)
● Thanks to modules, code splitting is becoming really simple and easy
○ Scripts are no longer loaded all at once
○ They can be loaded on demand
○ Huge performance and also UX improvements
Javascript practices - old and new
23
Dependency headache
● Thanks to the explosion of JS in recent years, your bundles will have
thousands of external dependencies
● Libraries depend on libraries which depend on libraries of libraries
● After installing React, ReactDOM and Patternfly you will have over 100
external dependencies
● At larger scale, any breaking change to a single dependency may cause the
whole project collapse and requires extreme caution
● Any upgrade must be considered and planned and will likely require tons of
refactoring
● YOU DON’T NEED LIBRARY FOR EVERYTHING
● Some libraries has become so popular that everybody uses them and you
can end up with multiple copies of the same code but in different versions
Javascript practices - old and new
24
NPM vs Yarn
NPM
● Created by Google
● Included by default with node
● Finally supports monorepo
(from version 7)
● Hosts over 1.3 mil of packages
● Option to audit your packages
Yarn
● Created by Facebook
● First introduction of lock file
● First introduction of monorepo
● Mirror of all npm packages
● Yarn 2.0 adds plg’n’play - option
to minimize download of
packages on install
Javascript practices - old and new
25
Web UI key principles (React based)
1. Component-Based Approach
● UI is divided into reusable pieces of code called
components (like a LEGO)
● Components can have a hierarchy, allowing the
creation of complex user interfaces from simple parts.
2. JSX (JavaScript XML)
● Syntax similar to HTML, used in React to
describe what the UI should look like.
● During compilation, JSX is transformed
into JavaScript function calls.
Javascript practices - old and new
26
Web UI key principles (React based)
3. One-Way Data Binding
● Data can be passed to components via read-only props.
● Components can have their own internal state, which can change.
● When the state changes, the component re-renders to reflect it.
4. Virtual DOM
● It is a lightweight representation of the actual DOM.
● Minimizes the number of updates made to the actual DOM by batching them together.
It only updates parts of the DOM that have changed, rather than re-rendering the entire page.
5. Declarative Approach
● Instead of telling the system step-by-step how to change the UI, React describes what the
final state should look like.
6. State Management
● In smaller applications, state management can be handled directly within components, while in
larger applications, libraries like Redux or Context API are often used to help manage global
state.
React beginner
27
https://reactjs.org/
What is React? Definition
Declarative, component based JavaScript library for building UI
● Components are (sometimes) stand alone units with well defined API.
● You don’t need to know how the component works under the hood to be able to use it.
● React is build on rather simple principles which allow developers build complex
solutions to satisfy their customers needs.
React IS NOT:
● state management library
● data fetching library
● data visualization library
● framework
React beginner
28
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
React tutorials
React beginner
29
Component and props
● Component is a stand alone UI piece with well defined API
● API can provide a set of props (you can send multiple props to single component)
● Props is an object
● Props are given to component from its parent
● Prop can be required or optional
● Key is a prop name, and value is its value
● Prop is a variable which is consumed and used by the component
● Component will most likely throw an error if its missing a required props
● Prop requirement and props can be defined via propTypes
● PropTypes is a static attribute on a component type
● Each prop type definition is a function that checks the prop content
React beginner
30
Props manipulating
● There are two types of props
○ Values - passing data down
○ Callbacks - user (or async) interactions
● Use spread to control multiple props
● Combine them together
● Spread them to pass them down const InputComponent = ({ onChange, ...props }) => {
return (
<input
{ ...props }
onChange={(event) =>
onChange(event.target.value )}
/>
)
}
React beginner
31
Component props examples
const TitleComponent = props => {
const {text, size} = props; // ES6 destructuring
return (
<h1 style={{ fontSize: size }}>{text}</h1>
)
};
const Parent = () => {
return (
<TitleComponent text="Hello" size={48} />
)
}
React beginner
32
Component prop types examples
import PropTypes from 'prop-types';
const TitleComponent = props => {
const {text, size} = props;
return (
<h1 style={{ fontSize: size }}>{text}</h1>
)
};
TitleComponent .propTypes = { // prop types static attribute definition
text: PropTypes.string.isRequired, // will throw an error if the prop missing
size: PropTypes.number // will be set to 24 if the prop is missing
};
TitleComponent .defaultProps = { // default values for the props
size: 24
};
React beginner
33
Class vs function component - Function
● Components are state and props in a nutshell
● React is moving towards function component
○ Hooks to control lifecycle
○ Hooks to connect to redux and router
○ Hooks to control everything
● Prefer functions for calculation to be moved out of function component
as they are re-initialized on every render
const InputComponent = () => {
return (
<input />
)
}
React beginner
34
Class vs function component - Class
● As some hooks are still missing so classes will still be around, but rare
● Binding of this in classes is necessary
● To ease binding @babel/plugin-proposal-class-properties should be used
● Do not call setState from render method as you end up with infinite loop
class InputComponent extends Component {
render() {
return (
<input />
)
}
}
React beginner
35
Component and state
● Component can have its internal state
○ It should not hold application state (data)
■ You have state management libraries for that
○ State should only hold component specific data
What is the value of input? Is the dropdown expanded?
What are the attributes of value logged in user?
● State is directly accessible only within the component
● If you want to expose it to children, it must be sent to them as a prop
React beginner
36
Component state example
const InputComponent = () => {
const [value, setValue] = useState(''); // storing the value here
const handleInputChange = (({ target: { value } }) => setValue(value));
return (
<input
name="controlled-input"
value={value}
placeholder="No value"
onChange={handleInputChange}
/>
)
};
37
Project start!
Javascript practices - old and new
38
Clone the repository!
● https://gitlab.fi.muni.cz/qhala/dashboard-PV278
Javascript practices - old and new
39
Install, start and build
● Run `npm install`
● Run `npm start`
● Optionally run `npm run build`
● Optionally run `npm run deploy`
Javascript practices - old and new
40
APIs
● Price per country
● Sunshine
● Air
● Temperture
Homework 2
● Deploy application -
https://gitlab.fi.muni.cz/qhala/dashboard-PV278
● Record a short video and submit it to the IS homework vault
● Deadline 3.11.2024
VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ