Goodbye Spaghetti-Code

From jQuery to ReactJS

Lisa

Twitter: @graefin_senil

Web: lisabaut.de

First Website ~ 15 years ago

Frontend Developer ~ 6 years

React Developer ~ 3 years

React Native Developer ~ 1 year

The Era of
Simple Websites

Simple Website

HTML

CSS

HTML & CSS

index.html

style.css

index.html

style.css

logo.svg

Server

Client / Browser

index.html

style.css

Upload

Serves

Client-Server-Model

Requests

Request and Response

Server

Response

Browser

(Client)

GET Request

http://react-js-girls-frankfurt.de

index.html

style.css

...

Response

GET Request

http://react-js-girls-frankfurt.de/about

about.html

style.css

...

Hypertext Transfer Protocol

http://

HTML => STATIC

CSS => STATIC

=> No programming languages

=> No interactive Changes

On every data change:

=> Need to reload /
make new http request

Reload for new data

Interactive User Interfaces

⚡️ JavaScript ⚡️

Next to HTML and CSS

=> Core Technology in WorldWideWeb

Programming Language

Enables INTERACTIVE webpages

All major Browsers have a dedicated

JavaScript Engine! ☄️

Browser Dev-Tools

Document Object Modal

DOM

Document Object Modal

Representation of an HTML document

Interface between JavaScript and the HTML document

JavaScript can

add, change, and remove all of the HTML elements and attributes in the page
change all of the CSS styles in the page
react to all the existing events in the page
create new events within the page

DOM Manipulation with JS

DOM API

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.dump()
window.scrollTo()

... and so much more....

Serve your JS File too

bundle.js

Vanilla JS / jQuery

jQuery uses JavaScript, but...

JavaScript library

- easier to select DOM elements

- easier to add animations

- easier to handle events

- asynchronious actions with Ajax

- easy to create Plug-Ins on top

- cross-browser support

Every 2nd website uses jQuery!

=> Wikipedia

Event Handling with jQuery

Click !

DOM Manipulations

Event Handler

Change the DOM

$('#accordion li a').click(function(){
  var currentID = $(this).attr('id');

  if($(this).hasClass('inactive')){
    $('#accordion li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('#'+ currentID).fadeIn('slow');
 }
});

Interactive User Interfaces

🥳

Frontend-Development

HTML 🤩 CSS 🤩 JavaScript/jQuery

More Interactions

⚡️More JavaScript⚡️

Interactive User Interfaces

- Maps

- Chats

- News-Feeds

- Follower-Counts

- Friends Requests

- Activity of Followers

....

DATA
CHANGES

Example: Facebook

Imagine: Facebook & jQuery

HTML

Event Handler

Change the DOM

Event Handler

Change the DOM

Event Handler

Change the DOM

Event Handler

Change the DOM

Event Handler

Change the DOM

Event Handler

Change the DOM

Fire jQuery!

They call it Spaghetti !

Event Handler

Change the DOM

Event Handler

Change the DOM

Event Handler

Change the DOM

Event Handler

Change the DOM

Event Handler

Change the DOM

Event Handler

Change the DOM

Event Handler

Change the DOM

Event Handler

Change the DOM

Event Handler

Change the DOM

DOM ?! How are you ?!

Which DOM manipulations are happening right now?
When will the next event happen?
In which STATE is the user interface currently?

We need more control !

✨ ReactJS ✨

Re-Thinking Web Development

Before React:
=> separation of concerns ! HTML-file, CSS-file, JS-file

React introduced new thinking:
=> Websites are made of smaller JavaScript components
=> each with their own state, logic, markup and styles

index.html

style.css

bundle.js

Server

Browser

Recap

index.html

bundle.js

Now: Everything is JavaScript !

- pages

- routing

- data changes

...

SPA

Single-Page-Application

React: A library for interactive User Interfaces

Virtual Dom: copy of actual DOM

Dom Diffing: compare VirtualDom with actual Dom

=> re-render only the elements which changed !

=> high performance ! 👈

Components

JSX

Data Flow

LifeCycle Methods

React Core Ideas

Components

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
- Facebook React Docs -

Components

- a re-usable chunk of code
- plug it anywhere you want
- a view of your application
- might contain other components
- might provide data
- might contain logic like:
=> what happens if someone clicks
on a ChildComponent
=> where does data come from

Components

A Component is a function !

- input parameters/props
- output is your view/your UI

- input new props
=> re-render your view/your UI

- render method is required !

- render should always return an Element

- Elements are created with JSX

- JSX looks like HTML => EASY !
- JSX Elements are converted to HTML
=> rendered to the DOM

Components

Component Architecture according to your needs!

Keep it simple ! 👌

Data Flow

Data Flow:

ACTION !

STATE CHANGE

PROPS

Action, State, Props

ACTION !

STATE CHANGE

PROPS

Data Flow:

Action, State, Props

Data Flow: Actions

A way to trigger view changes

- can be any document event:

- onClick
- onSubmit
- onChange
- onMouseIn/Out
- onScroll
- onDoubleClick

...

Data Flow: State

Where your data lives !

- every class component can hold its own state

- may pass state to child

- every state change triggers a Component render()

Data Flow: Props

Where your data comes from !

- pass data down to components via props

- if props change => re-render

- a prop can be anything that JavaScript supports:

boolean, string, object, array, number ...

Data Flow:

Action, State, Props

Data Flow:

Action, State, Props

ACTION !

STATE CHANGE

Data Flow: State

=> decide what to render according to state!

Data Flow: Action

Triggers state changes => triggers re-render UI

Data Flow

Props, State, Actions

Unidirectional Data Flow

Props, State, Actions

actions are triggered by the view
actions can update the state
the state change is passed to the view and to child components as props

=> state is often moved up in the Component tree, so that it can be
shared between components that need to access it

https://medium.freecodecamp.org/the-react-handbook-b71c27b0a795

Core Ideas: Data Fetching

=> How to get data into your application

For other options see => https://reactjs.org/community/data-fetching.html

Choose your own solution !

React is a library to render your view
=> not a framework

Core Ideas: Lifecycle methods

Mounting

Updating

Unmounting

=> use this phases to execute what you need

Components have several LifeTimes

Hey DOM ! I am here! 🤗

UPDATE!
My props or my state changed! 🥳

Bye! I am outta here ! ✌️

Lifecycle methods

Mounting:

- constructor
- getDerivedStateFromProps
- render
- componentDidMount

Updating:

- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate

Unmounting:

- componentWillUnmount

Lifecycle methods

Example: Fetch Data when Component is Mounted

ReactJS

Core Principles

Organized System of Components

A React Application contains a system of components
each Component may have its own state, logic, markup and styles
A Component is a function which accepts props
New Props => re-render Component
Components communicate via props from parents to child
ChildComponent communicates with parent via actions
Actions may change State
State Change => re-render Component

The view is a result of your application state !

http://chibicode.com/react-js-introduction-for-people-who-know-just-enough-jquery-to-get-by/

No Spaghetti no more 😎

Further Topics

How to get Started
Best Practices
Advanced Component Architecture
Testing
Global State Management
CSS in JavaScript
Server Side Rendering
EcoSystem / JavaScript Bundlers
Firebase
Debugging
Hooks
Gatsby
...

Sources

- https://reactjs.org/
- https://reactjs.org/docs/thinking-in-react.html

- https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3

- https://css-tricks.com/projects-need-react/

- http://chibicode.com/react-js-introduction-for-people-who-know-just-enough-jquery-to-get-by/

- https://jquery.com/

- https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76

- https://news.ycombinator.com/item?id=19205657
- https://syntax.fm/show/066/the-react-episode

- the internet in general

Get Started:

https://reactjs.org/docs/getting-started.html

https://reactforbeginners.com/

https://medium.freecodecamp.org/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6

https://github.com/markerikson/react-redux-links

Beyond...

Learn Es6:
https://es6.io/

React Components mit ES6
http://babeljs.io/blog/2015/06/07/react-on-es6-plus

React written in jQuery
http://hackflow.com/blog/2015/03/08/boiling-react-down-to-few-lines-in-jquery/

Getting Started with Redux
https://egghead.io/courses/getting-started-with-redux

Learn Redux mit WesBos
https://learnredux.com/

Thanks !

From jQuery to ReactJS - English

By lisabaut

From jQuery to ReactJS - English

ReactJS Girls Frankfurt Talk 27.02.2019

Goodbye Spaghetti-Code

From jQuery to ReactJS

Lisa

First Website ~ 15 years ago

Frontend Developer ~ 6 years

React Developer ~ 3 years

React Native Developer ~ 1 year

The Era of Simple Websites

Simple Website

HTML

CSS

HTML & CSS

Client-Server-Model

Request and Response

Hypertext Transfer Protocol

Reload for new data

Interactive User Interfaces

⚡️ JavaScript ⚡️

Browser Dev-Tools

Browser Dev-Tools

Document Object Modal

DOM

Document Object Modal

DOM Manipulation with JS

DOM API

Serve your JS File too

Vanilla JS / jQuery

jQuery uses JavaScript, but...

Event Handling with jQuery

Interactive User Interfaces

🥳

Frontend-Development

More Interactions

⚡️More JavaScript⚡️

Interactive User Interfaces

DATA CHANGES

Example: Facebook

Imagine: Facebook & jQuery

They call it Spaghetti !

DOM ?! How are you ?!

✨ ReactJS ✨

Re-Thinking Web Development

Recap

Now: Everything is JavaScript !

SPA

Single-Page-Application

React: A library for interactive User Interfaces

Components

JSX

Data Flow

LifeCycle Methods

React Core Ideas

Components

Components

Components

Components

Data Flow

Data Flow:

Action, State, Props

Data Flow:

Action, State, Props

Data Flow: Actions

Data Flow: State

Data Flow: Props

Data Flow:

Action, State, Props

Data Flow:

Action, State, Props

Data Flow: State

Data Flow: Action

Data Flow

Unidirectional Data Flow

Core Ideas: Data Fetching

Core Ideas: Lifecycle methods

Lifecycle methods

Lifecycle methods

ReactJS

Core Principles

Organized System of Components

No Spaghetti no more 😎

The Era of
Simple Websites

DATA
CHANGES