diff --git a/docs/2021-2022-summer/images/babel.png b/docs/2021-2022-summer/images/babel.png new file mode 100644 index 0000000..49f151b Binary files /dev/null and b/docs/2021-2022-summer/images/babel.png differ diff --git a/docs/2021-2022-summer/images/copilot.png b/docs/2021-2022-summer/images/copilot.png new file mode 100644 index 0000000..a7ff111 Binary files /dev/null and b/docs/2021-2022-summer/images/copilot.png differ diff --git a/docs/2021-2022-summer/images/dog.png b/docs/2021-2022-summer/images/dog.png new file mode 100644 index 0000000..40aeaf2 Binary files /dev/null and b/docs/2021-2022-summer/images/dog.png differ diff --git a/docs/2021-2022-summer/images/frontend-meme-1.png b/docs/2021-2022-summer/images/frontend-meme-1.png new file mode 100644 index 0000000..ebb55fe Binary files /dev/null and b/docs/2021-2022-summer/images/frontend-meme-1.png differ diff --git a/docs/2021-2022-summer/images/frontend-meme-2.jpg b/docs/2021-2022-summer/images/frontend-meme-2.jpg new file mode 100644 index 0000000..ac0f603 Binary files /dev/null and b/docs/2021-2022-summer/images/frontend-meme-2.jpg differ diff --git a/docs/2021-2022-summer/images/frontend-meme-3.jpg b/docs/2021-2022-summer/images/frontend-meme-3.jpg new file mode 100644 index 0000000..ae9b07e Binary files /dev/null and b/docs/2021-2022-summer/images/frontend-meme-3.jpg differ diff --git a/docs/2021-2022-summer/images/frontend-meme-4.jpg b/docs/2021-2022-summer/images/frontend-meme-4.jpg new file mode 100644 index 0000000..e4dd779 Binary files /dev/null and b/docs/2021-2022-summer/images/frontend-meme-4.jpg differ diff --git a/docs/2021-2022-summer/images/github-tags-system.png b/docs/2021-2022-summer/images/github-tags-system.png new file mode 100644 index 0000000..816ac44 Binary files /dev/null and b/docs/2021-2022-summer/images/github-tags-system.png differ diff --git a/docs/2021-2022-summer/images/hackerman.jpg b/docs/2021-2022-summer/images/hackerman.jpg new file mode 100644 index 0000000..e858835 Binary files /dev/null and b/docs/2021-2022-summer/images/hackerman.jpg differ diff --git a/docs/2021-2022-summer/images/html-meme-1.jpg b/docs/2021-2022-summer/images/html-meme-1.jpg new file mode 100644 index 0000000..98b1f1a Binary files /dev/null and b/docs/2021-2022-summer/images/html-meme-1.jpg differ diff --git a/docs/2021-2022-summer/images/html-meme-2.png b/docs/2021-2022-summer/images/html-meme-2.png new file mode 100644 index 0000000..692b237 Binary files /dev/null and b/docs/2021-2022-summer/images/html-meme-2.png differ diff --git a/docs/2021-2022-summer/images/ie.jpg b/docs/2021-2022-summer/images/ie.jpg new file mode 100644 index 0000000..efb0924 Binary files /dev/null and b/docs/2021-2022-summer/images/ie.jpg differ diff --git a/docs/2021-2022-summer/images/notifications.gif b/docs/2021-2022-summer/images/notifications.gif new file mode 100644 index 0000000..c7eb0f3 Binary files /dev/null and b/docs/2021-2022-summer/images/notifications.gif differ diff --git a/docs/2021-2022-summer/images/scss-compilation.png b/docs/2021-2022-summer/images/scss-compilation.png new file mode 100644 index 0000000..4a0fd64 Binary files /dev/null and b/docs/2021-2022-summer/images/scss-compilation.png differ diff --git a/docs/2021-2022-summer/images/sourcemaps.png b/docs/2021-2022-summer/images/sourcemaps.png new file mode 100644 index 0000000..1fba4c4 Binary files /dev/null and b/docs/2021-2022-summer/images/sourcemaps.png differ diff --git a/docs/2021-2022-summer/images/spotimania.png b/docs/2021-2022-summer/images/spotimania.png new file mode 100644 index 0000000..8ca171f Binary files /dev/null and b/docs/2021-2022-summer/images/spotimania.png differ diff --git a/docs/2021-2022-summer/images/squarespace.png b/docs/2021-2022-summer/images/squarespace.png new file mode 100644 index 0000000..d3d5dab Binary files /dev/null and b/docs/2021-2022-summer/images/squarespace.png differ diff --git a/docs/2021-2022-summer/images/stackoverflow-survey-2020.jpg b/docs/2021-2022-summer/images/stackoverflow-survey-2020.jpg new file mode 100644 index 0000000..3c0023a Binary files /dev/null and b/docs/2021-2022-summer/images/stackoverflow-survey-2020.jpg differ diff --git a/docs/2021-2022-summer/images/startup-1.jpg b/docs/2021-2022-summer/images/startup-1.jpg new file mode 100644 index 0000000..069c884 Binary files /dev/null and b/docs/2021-2022-summer/images/startup-1.jpg differ diff --git a/docs/2021-2022-summer/images/startup-2.jpg b/docs/2021-2022-summer/images/startup-2.jpg new file mode 100644 index 0000000..78549bd Binary files /dev/null and b/docs/2021-2022-summer/images/startup-2.jpg differ diff --git a/docs/2021-2022-summer/images/webpack.png b/docs/2021-2022-summer/images/webpack.png new file mode 100644 index 0000000..1289754 Binary files /dev/null and b/docs/2021-2022-summer/images/webpack.png differ diff --git a/docs/2021-2022-summer/images/youtube.jpg b/docs/2021-2022-summer/images/youtube.jpg new file mode 100644 index 0000000..fef0e81 Binary files /dev/null and b/docs/2021-2022-summer/images/youtube.jpg differ diff --git a/docs/2021-2022-summer/introduction-to-frontend-frameworks.md b/docs/2021-2022-summer/introduction-to-frontend-frameworks.md new file mode 100644 index 0000000..40dd7fd --- /dev/null +++ b/docs/2021-2022-summer/introduction-to-frontend-frameworks.md @@ -0,0 +1,166 @@ +# Introduction to Frontend Frameworks +*An intuitive explanation of why frontend frameworks are used* + +## Frontend Engineering + +- Frontend Engineering, one of the most important aspect of web dev +- Feared by lots of developers (ehem ehem CSS) + +??? info "Memes" + ![frontend-meme-1](./images/frontend-meme-1.png) + ![frontend-meme-2](./images/frontend-meme-2.jpg) + ![frontend-meme-3](./images/frontend-meme-3.jpg) + ![frontend-meme-4](./images/frontend-meme-4.jpg) + +## Job Market and Trends + +???+ info "StackOverflow 2020" + Can be seen that there is a huge portion that will needs frontend. + + Note: Developers can identify as many types + + ![stackoverflow-survey-2020](./images/stackoverflow-survey-2020.jpg) + +???+ info "Startups" + ![startup-1](./images/startup-1.jpg) + ![startup-2](./images/startup-2.jpg) + +### Github Copilot and Drag and Drops +- Getting replaced by AIs, Drag and drops? +- Far from reality? + +???+ examples "Github Copilot and Squarespace" + ![copilot](./images/copilot.png) + ![squarespace](./images/squarespace.png) + +## Problems + +### Cross-Browser Support +- Need to support multiple browsers + +### HTML is WET! +Not DRY = WET + +D – Don't + +R – Repeat + +Y - Yourself + +???+ example "Github Tags System" + ![github-tags-system](./images/github-tags-system.png) + +### Inefficiencies of Reloading +- Most parts of website don't change + +???+ example "Youtube" + ![youtube](./images/youtube.jpg) + +- What about with notifications and realtime updates? + +???+ example "notifications" + ![notifications](./images/notifications.gif) + +### State Management and Rerendering +- How do you handle changes in the state of the application? + +#### Example "Spotimania" +Realtime Multiplayer Song Guessing Game +https://spotimania.herokuapp.com/ + +![spotimania](./images/spotimania.png) + +Information + +- Song picture +- Notifications when someone joined or scored +- Song title + artist + +How do we handle when we "Submit Guess"? + +???+ info "HTML Format Submit Approach" + 1. Reloads = loses current state + 2. How do you coordinate with players? + +???+ info "AJAX Calls" + 1. From frontend, use JS to do AJAX Calls + 2. After receiving AJAX call, modify everything that needs the data (Find element by DOM, do some janky HTML inject) + + ```js + const newData = await fetch(…) + const image = document.querySelector('img .music') + image.outerText = `` + ``` + + ??? bug "Cross-site Scripting" + Now, you have to implement your own strategy to do this. + ```js + newData = {… , image: "", ...} + ``` + ![hackerman](./images/hackerman.jpg) + + ???+ note " When you try to do render by that approach:" + + - slower (rerendering things that should not render) + - tedious (find element and update) + - security + - code complexity + - hard to keep track of states (especially if different portion of the UI relies on a certain data) + +## How do we fix it? + +### Cross-Browser Support + +**Babel: Transpiles / Translates** +New JavaScript to old JavaScript that is supported + +![babel](./images/babel.png) + +**Webpack: Bundles / Packs** +Bundles the JavaScript modules into a single minified file + +![webpack](./images/webpack.png) + +??? example "SCSS Compilation" + Translates concise and programatic version of CSS to something that can be understood by the browser + + ![scss-compilation](./images/scss-compilation.png) + +??? example "Minification" + Makes files smaller by removing unnecessary characters + + ![sourcemaps](./images/sourcemaps.png) + + + +### What if HTML is NOT WET? What if HTML is a programming language? + +??? note "Memes about HTML as a programming language" + ![html-meme-1](./images/html-meme-1.jpg) + ![html-meme-2](./images/html-meme-2.png) + + +**What if HTML has variables?** + +- perform computations to be displayed in the interface (solves **State Management and Rerendering**) + +**What if HTML has loops?** + +- Eliminate repetitive code (solves **wet HTML**) + +**What if HTML has functions?** + +- Divide interface into modular components (solves **wet HTML**) + - load only components that are not loaded (solves **Inefficiencies of Reloading**) +- interface determined by parameters +- Maybe we can write a function that will automatically update HTML when data changes? (solves **State Management and Rerendering**) + +**What if HTML has condition?** + +- Conditional rendering (solves Reloading to show different view) + +## What's next? +The next two workshop content are: + +- React +- Vue \ No newline at end of file diff --git a/docs/2021-2022-summer/introduction-to-react.md b/docs/2021-2022-summer/introduction-to-react.md new file mode 100644 index 0000000..0799802 --- /dev/null +++ b/docs/2021-2022-summer/introduction-to-react.md @@ -0,0 +1,370 @@ +# Introduction to React +*Sparking the REACTion of User Interface and Experience* + +![dog](./images/dog.png) + +## Decomposing the HTML User Interface +??? example "Complete code" + ```html + + + + + + + + + My Home Page - Frinze Lapuz + + + + +
+
+
Here Some Dog For You. Cool Stuff right?
+
+ +
+ +
+
+
+
+ + + + + + + ``` + +???+ example "Relevant Code for Discussion" + ```html hl_lines="1-5 8 10-49" + +
+
+
Here Some Dog For You. Cool Stuff right?
+
+
+ +
+
+
+
+ ``` + + 1. Navigation Bar + 2. Some Text + 3. Carousel + +### HTML Stored in Variables +```js +const Nav = + ` + ` +``` + +### HTML Stored in Functions +```js hl_lines="1 5" +const Nav = (title) => + ` + + ` +``` + +???+ info "Carousel Decomposition" + The highlighted ones are the key-distinct data driven elements. + ```html hl_lines="4 9-15" +
+ +
+ ``` + + 1. Carousel Indicators + 2. Carousel Items + + Now, what if we have a variable called `dogsData` an array of objects (may come from `fetch`). + ```js + dogsData = [ + ... + { + imgSrc: "dog.jpg", + title: "First Dog", + caption: "Cutie :)" + } + ... + ] + ``` + + ```js + const Carousel = (dogsData) => + ` +
+ +
+ ` + ``` +### Assemble the Components +```js hl_lines="1 5" +{Nav("Royal Homepage")} +
+
+
+ {Carousel(dogsData)} +
+
+``` +or with JSX + +```html hl_lines="1 5" + +
+
+
+ +
+
+``` + +## Intro to React + + + +???+ example "Complete Modularised Code" + ```js + const Nav = () => + + const Carousel = (dogsData) => +
+ +
+ + const Homepage = () =>{ + const dogsData = fetch(...) // Get data from API + return ( + <> + +
+
+
+ +
+
+ + ) + } + ``` + +## Getting Started with React +Getting Started with the app + +To get started with react, use the following commands + +`npx create-react-app my-app` where my-app is the name of the folder for where the react app is going to be. + +`cd my-app` + +Notice that it created a couple of folders. In a couple of sentences: + +`src/index.js` - injects the user interface in the public/index.html (the front part of the build) + +`public` - folder containing the static assets as well as the index.html + +`package.json` - dependencies and scripts for the app + +type `yarn start` to run the development version of React (it will run `react-scripts` start within the node_modules … so running `react-scripts` start will not exactly be the same). This will serve up React in a port + +To be left as a live coding exercise. Live coding demonstration: +## Demo + +- Passing Array props +- show “rafce” +- useState when adding new item \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 7a1a215..ed80188 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -30,6 +30,7 @@ theme: - navigation.tabs - toc.integrate - header.autohide + - content.code.annotate plugins: - search @@ -72,6 +73,7 @@ markdown_extensions: - attr_list - def_list - pymdownx.tasklist + - pymdownx.inlinehilite - pymdownx.keys - pymdownx.mark - pymdownx.emoji: @@ -138,5 +140,7 @@ nav: - Introduction to Web Development: 2021-2022-summer/introduction-to-web-development.md - Introduction to Web Basics: 2021-2022-summer/introduction-web-basics.md - Practical Software Engineering Practices: 2021-2022-summer/practical-software-engineering-practices.md + - Introduction to Frontend Frameworks: 2021-2022-summer/introduction-to-frontend-frameworks.md + - Introduction to React: 2021-2022-summer/introduction-to-react.md - 2021 Winter: - Overview: 2021-winter/index.md \ No newline at end of file