Start adding front-end training

training/front-end/00-intro.md

@@ -0,0 +1,29 @@
+# Introduction to front-end programming
+
+## Goal of this training
+
+This training was developed for back-end and infra developers.
+
+I am not an expert in front-end development. This should only be considered an introduction.
+
+## Prerequisites
+
+Assumed knowledge:
+
+- HTTP
+- Basics about browser
+- Basic about HTML/CSS/JS
+
+## To do before the course
+
+Read the [grab/front-end-guide](https://github.com/grab/front-end-guide) to get a 10,000 viewpoint about the road ahead. Evidently you don't need to check the details about each topic (that's what we'll do in this course), but obviously feel free to look up what seems interesting to you!
+
+## Curriculum
+
+1. Modern Javascript/TypeScript development
+2. Intro to React
+
+## Inspiration
+
+- [Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!](https://frontendmasters.com/books/front-end-handbook/2019/)
+- [grab/front-end-guide: 📚 Study guide and introduction to the modern front end stack.](https://github.com/grab/front-end-guide)

training/front-end/01-modern-javascript-typescript.md

@@ -0,0 +1,150 @@
+# Modern JavaScript/TypeScript
+
+Note: run code quickly with https://codesandbox.io/s/
+
+## Quirks
+
+### Comparing scalar, arrays, and objects
+
+#### Always use triple comparators (`===`) instead of double (`==`)
+
+```javascript
+// ???
+console.assert('1' == 1)
+
+// Better
+console.assert(!('1' === 1))
+console.assert('1' !== 1)
+```
+
+#### Comparing non-scalar
+
+Applied on arrays and objects, `==` and `===` will check for object identity, which is almost never what you want.
+
+```javascript
+console.assert({a: 1} != {a: 1})
+console.assert({a: 1} !== {a: 1})
+
+const obj = {a: 1}
+const obj2 = obj
+console.assert(obj == obj2)
+console.assert(obj === obj2)
+```
+
+Use a library such as [lodash](https://lodash.com/) to properly compare objects and array
+
+```javascript
+import _ from 'lodash'
+
+console.assert(_.isEqual({a: 1}, {a: 1}))
+console.assert(_.isEqual([1, 2], [1, 2]))
+
+
+## Object assignment and destructuring
+
+### Objects
+
+```javascript
+const toaster = {size: 2, color: 'red', brand: 'NoName'};
+
+// Get one object key
+const {size} = toaster;
+console.assert(size === 2)
+
+// Get the rest with ...rest
+const {color, brand, ...rest} = toaster;
+console.assert(_.isEqual(rest, {size: 2}));
+```
+
+### Array
+
+```javascript
+const theArray = [1, 2, 3];
+const [first, second] = theArray;
+const [first1, second2, ...rest] = theArray;
+
+console.assert(first === 1);
+console.assert(second === 2);
+console.assert(_.isEqualWith(rest, [3]));
+```
+
+## `let` and `const`
+
+```javascript
+const constantVar = 'a';
+
+// Raises "constantVar" is read-only
+constantVar = 'b';
+
+let mutableVar = 'a';
+mutableVar = 'a';
+
+// Note: this will work ok
+const constantObject = {a: 1}
+constantObject.a = 2
+constantObject.b = 3
+
+// Raises: "constantObject" is read-only
+constantObject = {a: 1}
+
+// const and let are block scoped. A block is enclosed in {}
+{
+  const a = 'a';
+  console.log({a})
+}
+// Raises: ReferenceError: a is not defined
+console.log({a})
+```
+
+Note: try to use `const` as much as you can.
+
+- More constraints = safer code
+- Some kind of "immutability" is good (since `const` objects can be modified, it is not true immutability)
+- You can't define a `const` without providing its initial value
+- Most people do this in modern JS
+
+Never use `var`:
+
+- `var` variables are initialized with `undefined`, while `let` and `const` vars are not initialized and will raise an error if used before definition.
+- `var` is globally or function-scoped, depending on whether it is used inside a function.
+- `let` and `const` are block-scoped
+- `let` and `const` cannot be reused for the same variable name
+
+## Arrow functions
+
+The first advantage of arrow function is that they're shorter to write:
+
+```javascript
+// You can define a function this way:
+const myFunction = function() {
+  console.log("hello world");
+}
+
+// With an arrow function, you save a few characters:
+const myArrowFunction = () => {
+  console.log("hello world");
+}
+
+// Some things, like params parentheses, and function code brackets, are optional
+const myFunctionToBeShortened = function(a) {
+  return a;
+}
+
+// Shorter arrow function
+const myFunctionToBeShortenedArrowV1 = (a) => {
+  return a;
+}
+
+// Shortest arrow function
+// Remove single param parenthesis, remove function code bracket, remove return
+const myFunctionToBeShortenedArrowV2 = a => a
+console.assert(myFunctionToBeShortenedArrowV2(1) === 1)
+```
+
+Best practices:
+
+- I usually keep the parameters parenthesis. If you add a parameter, you'll have to add them back.
+
+## References
+
+- [ES5 to ESNext — here’s every feature added to JavaScript since 2015](https://www.freecodecamp.org/news/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e/)