# Frontend frameworks & React --- ## Why use frameworks? Building apps is complicated. User expectations for interactivity, performance etc are high. --- ### Framework advantages --- #### Shared understanding A well-known framework provides patterns for structuring code within a team. Frameworks usually have good google-able docs. --- #### User experience Good frameworks make it easier to build cool stuff. They can empower newer developers. --- #### Developer experience Can make it nicer to build complex apps. They often come with stuff developers want built in. --- ### Framework disadvantages --- #### Performance Frameworks are usually a bunch of extra JS that must be downloaded before your own code runs. They can also encourage bad habits/patterns that can lead to bloated apps. --- #### Lock-in Something built in React usually can't use libraries written for Angular. An organisation tends to have to go all in on one technology. --- #### No control React is built by Facebook for Facebook. They might add features you don't need, or refuse to add features you want. --- ## Why use React? --- ### Declarative UI Instead of telling the browser each step to render an element you _describe_ it (just like in HTML!) --- **Imperative** ```javascript const div = document.createElement("div"); div.classList.add("box"); div.append("Hello world"); return div ``` **Declarative** ```jsx return <div className="box">Hello world</div>; ``` --- ### Declarative UI Even event listeners are declarative ```jsx return <button onClick={() => console.log("Clicked!")}>Click me</button>; ``` --- ### JSX is close to HTML JSX looks a lot like HTML. This lets people unfamiliar with React contribute markup. It's also reasonably easy to copy/paste HTML examples. --- ### JSX is close to HTML ```jsx function DateInput() { return h("input", { id: "dob", type: "date", placeholder: "dd/mm/yyyy"}); } ``` vs ```jsx function DateInput() { return <input id="dob" type="date" placeholder="dd/mm/yyyy" />; } ``` --- ### Component model for easy code reuse Dividing up little pieces of your app is a nice mental model. You can encapsulate some markup, styling and functionality into a single re-usable thing. --- ### Component model for easy code reuse ```jsx <Form> <Field> <Label>Date of birth</Label> <DateInput> <Error> </Field> </Form> ``` --- ### "Just JavaScript" No special templating language: you use JS conditionals, variables and loops to render dynamic markup. --- ### "Just JavaScript" ```jsx const posts = ["blah", "other post", "..."]; return <div>There are {posts.length || 0} blog posts.</div>; ``` --- ### UI is a function of your state For any given application state the rendered DOM should always be the same. You can just update state without worrying about updating the UI. --- ### UI is a function of your state ```jsx return <button>{isOpen ? "Close" : "Open"}</button>; ``` --- ### No DOM manipulation Declarative elements and event listeners, plus state-based rendering, mean you almost never directly access the DOM. No more `querySelector`. --- ### Efficient DOM updates React "diffs" the DOM when it re-renders your components and updates only the nodes that have changed. In a large UI this can have performance advantages. --- ### Efficient DOM updates