frameworks why javascript
TRANSCRIPT
![Page 1: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/1.jpg)
Why JavascriptFrameworks
INFO 253A: Frontend Web ArchitectureKay Ashaolu
![Page 2: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/2.jpg)
We've spent a lot of timeon Javascript
We've learned the basics of JavascriptWe've learned how Javascript is used in the browser (i.e. how itmanipulates the Document Object model)We've learned some of the newer features of JavaScript (ES6)
![Page 3: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/3.jpg)
We've spent a lot of timeon Javascript
We did this so that you have a good foundation to write somequality JavaScriptIt is really, really important to have a good foundation forjavascript
![Page 4: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/4.jpg)
Okay, so now what?We could start learning how to build a complex app with what weknowHTML, CSS, and JavaScript is all you need build an applicationYou can write functions to perform actions and manage state
![Page 5: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/5.jpg)
Okay, so now what?You can use the document object in JavaScript to manipulate theDOMWe have not talked about A JAX or making HTTP Requests, but itscoming
How you connect your web app to external systems
![Page 6: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/6.jpg)
But that would be hardRemember that JavaScript feature matrixYou run into the same issue with CSS, and even HTMLThere's even a to thiswebsite dedicated
![Page 7: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/7.jpg)
But that would be hardAlso writing quality modular JavaScript is hardFocus on writing self contained components that interact witheach otherModularity helps with code maintainability and development
![Page 8: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/8.jpg)
And would take a longtime
You will find yourself writing a lot of what's called "boilerplate"codeCode that you write over and over againEssentially you are creating your own "libraries" and"frameworks" to save yourself time
![Page 9: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/9.jpg)
What is a JavaScriptLibrary?
A library performs specific, well-definined actionsTypically it provides several functions for you to useYou are in control of your code, you simply use a library to makeit easier to do what you wanted to do
![Page 10: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/10.jpg)
JavaScript LibraryExample
jQuery is the granddady of JavaScript Libraries
$(document).ready(function(){ $("form").submit(function(event){ var regex = /^[a-zA-Z]+$/; var currentValue = $("#firstName").val(); if(regex.test(currentValue) == false){ $("#result") .html('<p class="error">Not valid!</p>') .show() .fadeOut(1000); // Preventing form submission event.preventDefault(); } });});
123456789
101112131415
![Page 11: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/11.jpg)
Please noteYou are adding html code directly through your JavaScriptImagine you want to standardize that error throughout your webapplicatonYou would have to copy and paste that HTML code everywhereyou need to add errorYou are in control
![Page 12: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/12.jpg)
What is a JavaScriptFramework?
A framework dictates the architecture your project will followYou typically hook your code into a framework in order to get it toworkThe framework usually makes it easy to build a completeapplication quicklyYou typically have to fit the pattern that is defined by theframework
![Page 13: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/13.jpg)
LibraryFlexibleDeveloper ControlEasy to incorporate toexisting codeMore work to get started
FrameworkQuick to get startedQuick to understand thebasicsLess Flexible
Library vs Framework
![Page 14: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/14.jpg)
What is React?This is a good questionIf you look up online, people will largely say React is a libraryHowever some will make the case that React is a frameworkReact is typically paired with frameworks like Flux and Redux sothe lines get blurred even moreYou can even make the argument that hooks render Reduxirrelevant so perhaps React is a framework
![Page 15: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/15.jpg)
This is what I thinkReact is a JavaScript library that provides functionality in such away that it encourages the use of a new kind of framework of
developing user interfaces, centralizing the data of the application inone area and asking the developer to tell the application what it
should display with the data that it has.
![Page 16: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/16.jpg)
So that wasn't wellworded at all
React lets you focus on writing self contained pieces of code(modules) where you describe how you would render thatmodule if it had a certain piece of data. What you don't have toworry about is figuring out how your UI is going to manipulatethe dom to make that change happen
![Page 17: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/17.jpg)
Remember this?<html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="../css/style.css" /> </head> <body> <form id="locationForm"> <label for="name">Name: </label> <input type="text" name="name" id="name" /><br /> <label for="state">State</label> <select name="state"> <option value="CA">CA</option> <option value="NY">NY</option> <option value="TX">TX</option> </select><br /> <input type="submit" value="Save Location" /> </form> <br /> <div id="locationList"> </div> <script src="../js/script.js"></script> </body></html>
123456789
10111213141516171819202122232425262728
html/index.html
![Page 18: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/18.jpg)
Remember this?.highlight { color: red; background-color: yellow;}
1234
css/style.css
![Page 19: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/19.jpg)
Remember this?/* Populate with current location */let locationDiv = document.getElementById("locationList"); if (localStorage.curLocation != null) { locationDiv.innerHTML = localStorage.curLocation;} /* Run code on submit button push */let locationForm = document.getElementById("locationForm");locationForm.addEventListener("submit", function(event) { let name = locationForm.elements.namedItem("name").value; let state = locationForm.elements.namedItem("state").value; localStorage.curLocation = name + ": " + state; let locationDiv = document.getElementById("locationList"); locationDiv.innerHTML = localStorage.curLocation; locationDiv.classList.add("highlight"); /* This stops the usual function of "submit" which is to send data to another server */ event.preventDefault();})
123456789
1011121314151617181920212223
js/script.js
![Page 20: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/20.jpg)
Remeber this?Remember how you had to both populate #locationList onstartup and on submit button event?You had to think about every aspect when #locationList wouldchange, including:
On startupOn submit button
![Page 21: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/21.jpg)
What's different withReact
You write a component that would represent #locationListYou write code on how you would render locationList if given anarray (think, like a function)That's it!
![Page 22: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/22.jpg)
React Example<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="/logo192.png" /> <link rel="manifest" href="/manifest.json" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script src="/static/js/bundle.js"></script> <script src="/static/js/1.chunk.js"></script> <script src="/static/js/main.chunk.js"></script> </body></html>
123456789
1011121314151617181920212223
index.html (Autogenerated)
![Page 23: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/23.jpg)
React Example.highlight { color: red; background-color: yellow;}
1234
index.css
![Page 24: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/24.jpg)
React Exampleimport React, { useState } from 'react';import ReactDOM from 'react-dom'; import './App.css'; function LocationApp(props) { const [name, setName] = useState(localStorage.getItem("curLocationName")); const [state , setState] = useState(localStorage.getItem("curLocationState")); const [className, setClassName] = useState(""); const handleSubmit = (event) => { event.preventDefault(); const name = event.target.name.value; const state = event.target.state.value setName(name); localStorage.setItem("curLocationName", name); setState(state); localStorage.setItem("curLocationState", state); setClassName("highlight"); }
123456789
10111213141516171819202122232425
index.js
![Page 25: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/25.jpg)
React Example123456789
10111213141516171819202122232425262728
index.js
![Page 26: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/26.jpg)
React Example explainedThere's a lot going on, but this code does the same thing as theprevious codeNote how html is in the JavaScript (called JSX)The real cool thing is that once LocationApp is created, you canadd multiple instances anywhere you want and it will still work
![Page 27: Frameworks Why Javascript](https://reader031.vdocuments.site/reader031/viewer/2022011903/61d69d2d6b8d5c411a0da76a/html5/thumbnails/27.jpg)
Questions