Web

Frontend Frameworks

Bertil Chapuis, Paul Nta

Frontend Web Frameworks

## <i class="fas fa-hand-paper"></i> Adding interactivity
                            
                            For this, we need to use Javascript to:
                            - read information in the DOM (id, data attributes, etc...)
                            - react to user input
                            - update the DOM

```javascript
                            const filterInput = document.getElementById("filter");
                            filterInput.addEventListener("input", (e) => {
                                const filter = e.target.value;
                                // filterList the list
                                // then update the count
                            });
                            ```

How this logic scales if you add more features (eg. button to add a new contact?

jQuery

## <i class="fas fa-code"></i> Imperative rendering with jQuery
                            
                            When Internet Explorer was the most popular browser, we had to write a lot of code to make sure that our web application would work on all browsers.

Without jQuery (IE8+):

```javascript
                            if (el.classList) {
                                el.classList.add(className);
                            } else {
                                var current = el.className, found = false;
                                var all = current.split(' ');
                                for (var i=0; i < all.length, !found; i++) {
                                    found = all[i] === className;
                                }
                                if(!found) {
                                    if (current === '') el.className = className;
                                    else el.className += ' ' + className;
                                }
                            }
                            ```

With jQuery:

```javascript
                            $(el).addClass(className);
                            ```

## <i class="fas fa-code"></i> Imperative vs Declarative
                            
                            jQuery promotes an imperative style to render elements, i.e., the DOM is updated from the control flow.

```html
                            <div id="content"></div>
                            ```

```javascript
                            $("#content").html("Hello jQuery!")
                            ```

Modern frameworks (e.g. Angular, Vue, React, etc.) promote a declarative style, i.e., the DOM is updated from the data.

```html
                            <div id="content">{{ message }}</div>
                            ```

```javascript
                            const app = new Vue({
                                el: '#content',
                                data: {
                                    message: 'Hello Vue!'
                                }
                            })
                            ```

The declarative approach effectively reduces the number of statements required to update the UI in large applications.

React

## <i class="fas fa-hand-paper"></i> Declarative rendering with React
   
                            A **Component** is a class or function, which accepts inputs (called props) and returns a React element describing what should appear on the screen.

The **render** method returns a React element describing what should appear on the screen.

The **setState** method schedules an update to a component’s state object. 
                            
                            When the **state changes**, the component responds by re-rendering itself.

```javascript
                            class App extends React.Component {
                                state = { filter: "", contacts: [] };
                                onFilterChanged = (e) => {
                                    this.setState({ filter: e.target.value });
                                };
                                addContact = (name) => {
                                    this.setState({ contacts: [...this.state.contacts, name] });
                                };
                                render() {
                                    return (<div className="App">...</div>);
                                }
                            }
                            ```

## <i class="fas fa-code"></i> Declarative vs Imperative (pseudo-code)
                            
                            With the **imperative** approach, you tell **what** you want to render and **how** it should be rendered

```javascript
                            function onFilterChanged(filter) {
                                const currentList = getCurrentList();
                                const newList = filterList(currentList, filter);

updateList(newList);
                                updateCounter(newList.length);
                               
                                if (isEmpty(newList)) {
                                    displayEmptyMessage();
                                } else {
                                    removeEmptyMessage();
                                }
                            };
                            ```

With the **declarative** approach, you tell **what** you want to render.

```javascript
                            function onFilterChanged(filter) {
                                setState({ filter })
                            }
                            ```

## <i class="fas fa-code"></i> React under the hood
   
                            The render function is called every time the state changes and returns a JSX element.

```javascript
                            return (
                                <h1 className="greeting">
                                    Hello, world!
                                </h1>
                            );
                            ```

The JSX element is converted to a React element. This is typically done via a transpiler like [Babel](https://babeljs.io/).

```javascript
                            const element = React.createElement(
                                'h1',
                                {className: 'greeting'},
                                'Hello, world!'
                            );
                            ```

The React element is then rendered to the DOM.

```javascript
                            const container = document.getElementById('root');
                            ReactDOM.render(element, container);
                            ```

Web

Frontend Frameworks

Frontend Web Frameworks

jQuery

React

Choosing a framework