rebase

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "cSpell.words": [
     "Contentful",
+    "exercice",
     "FRIZZARIN",
     "inconsolata",
     "Intelli",
@@ -9,4 +10,4 @@
     "sfeir",
     "SFEIR"
   ]
-}
+}

docs/markdown/02-architecture/00-TITLE.md

@@ -0,0 +1,2 @@
+<!-- .slide: class="transition bg-pink" -->
+# Web Architecture

docs/markdown/02-architecture/01-KINDS.md

@@ -0,0 +1,83 @@
+# Web architecture
+
+When creating app, depending of the type of app and the size, you will need to adapt the architecture
+
+It exist **4** main architecture:<br/><br/>
+
+- View architecture<br/><br/>
+- Atomic architecture<br/><br/>
+- Island architecture<br/><br/>
+- hexagonal architecture<br/><br/>
+
+##==##
+
+# View Architecture
+
+Architecture by default for React and Vue, based on the different page that the application contains <br/><br/>
+
+- **Pros**:
+  - Easy to start
+  - Easy to understand
+  - Easy to test
+
+<br/><br/>
+
+- **Cons**:
+  - Hard to scale
+  - Hard to maintain
+
+
+##==##
+
+# Atomic Architecture
+
+Architecture by default for Angular, based on the different feature that the application contains <br/><br/>
+
+- **Pros**:
+  - Easy to scale
+  - Easy to maintain
+  - Easy to test
+
+<br/><br/>
+
+- **Cons**:
+  - medium to start
+  - medium to understand
+
+##==##
+
+# Island Architecture
+
+Architecture for server side rendering, based on the island part of interactivity. <br/><br/>
+
+
+- **Pros**:
+  - less javascript loaded initially
+  - content prioritization
+  - Core Web Vitals respected out of the box
+
+<br/><br/>
+
+- **Cons**:
+  - not performant for application with a lot of interactivity
+  - difficult to maintain
+  - difficult to start
+  - big learning curve
+
+##==##
+
+# Hexagonal Architecture
+
+Architecture used by netflix, that separate the business logic and the technical layer
+
+- **Pros**:
+  - Easy to scale
+  - Facilitates the introduction of changes
+  - Each layer can be developed independently
+
+<br/><br/>
+
+- **Cons**:
+  - difficult to start
+  - difficult to maintain
+  - big learning curve

docs/markdown/02-architecture/02-COMPONENT-TREE.md

@@ -0,0 +1,30 @@
+<!-- .slide: class="two-column"-->
+# A Tree Component
+
+<br/><br/>
+
+- A React application is a composition of components <br/><br/>
+- Children are displayed inside their parents if there are presents in the template of the parent<br/><br/>
+
+##--##
+
+<!-- .slide: class="with-code inconsolata"-->
+
+<br/><br/><br/>
+
+
+```tsx
+import Header from './Header';
+
+function App() {
+  return (
+    <main>
+      <Header />
+      <div>
+        <h1>Hello Students</h1>
+      </div>
+    </main>
+  );
+}
+```
+<!-- .element: class="big-code"-->

docs/scripts/day-one.js

@@ -8,13 +8,17 @@ function introSlides() {
     '01-intro/01-ENVIRONMENTS.md',
     '01-intro/02-BOOTSTRAPPING.md',
     '01-intro/03-HELLO_WORLD.md',
-    '01-intro/10-EXERCICE-BOOTSTRAPPING.md',
+    '01-intro/10-EXERCISE-BOOTSTRAPPING.md',
     '01-intro/04-DEEPER.md',
     '01-intro/05-JSX.md',
     '01-intro/06-COMPONENTS.md',
   ];
 }
 
+function architectureSlides() {
+  return ['02-architecture/00-TITLE.md', '02-architecture/01-KINDS.md', '02-architecture/02-COMPONENT-TREE.md']
+}
+
 export function dayOneSlides() {
-  return [...schoolSlides(), ...introSlides()];
+  return [...schoolSlides(), ...introSlides(), ...architectureSlides()];
 }