RESUMEN CURSOS PLATZ
I. ES6+
“npm init” para inicializar un proyecto en nodeJS.
Plugin “code runner” para ejecutar fragmentos de código JS
TC39 esta a cargo de las nuevas versiones de JS (idea, propuesta, prueba, candidato, listo)
a) ES6 (2015)
- Parámetros por defecto en las funciones
- Back-Tild para strings
- Funciones flecha
- Detructuración: let x={a:1, b:2}; let {a}=x
- Operador spreed “…”
- Variables “let” y “const”
- x = {a:a,b:b} reducido a x={a,b}
- clases
- modulos “export default myFunction” y “import myFunction from ‘./modulo’”
- generadores “function* myFunction”, retorna “yield a;yield b;etc” y se usa con
“myFunction.next();myFunction.next();etc”
b) ES7 (2016)
- Funcionalidad “[1,2,3].includes(3)” retorna true
- “let x=2**2” exponienciación
c) ES8 (2017)
- “Object.entries()” retorna un array según el objeto
- “Object.values()” retorna un array con los valores del objeto
- “String.padStart(x,string)” y “String.padEnd(x,string)” donde x es el número de espacios total
para completar con texto string
- async, await
- {a:1,} compatible con {a:1}
- “try{}catch(error){console.log(error)}”, para manejo de errores
d) ES9 (2018)
- “let {a,…all}=x” donde “all” almacena el resto del objeto “x”
- “finally” para promesas “newPromise().then().catch().finally()”
- “exec” para expresiones regulares “x=/{0-4}/;x.exec()”
e) ES10 (2019)
- “Array.flat(n)” para subir de nivel los array hijos según “n” profundidad.
- “Array.flatMap()”
- “String.trimStart()” y “String.trimEnd” para eliminar espacion en blanco al inico o final
- “error” como palabra reservada en el “try{}catch{console.log(error)}”
- “Array.fromEntries()” para convertir array a objeto.
- “Symbol”
II. Profesional en JavaScript
Se necesita conocer el lenguaje(Fundamentos, no fundamentos “promesas, getter, setters, proxies,
generadores”, como funciona “motor, herencia prototipal, evento loop”), entornos de programación
(Browser y el DOM api), mejores prácticas (no reinventar la rueda, probar nuestro código), versado de
código (leer c´digo, mucho y constante), ética (responsable, puntual, decir que no, no hacer daño) y
experiencia.
a) Inicio del proyecto
- “npm init -y” inicializar todo por defecto
- “npm i -D nombrePaquete” instala el paquete como dependencia de desarrollo
b) Como llega un script
- DomContentLoaded
- El navegador procesa ordenadamente según el html o script que encuentre.
- <script async src=”url”></script> para traer script de manera asíncrona sin que detenga el
procesamiento de la página, una vez traído ejecutara el script (detendrá el procesamiento de la
página si aún no acaba)
- <script defer src=”url”></script> ejecuta el script después de cargar la pagina
c) Scope
- “let”
- <script type=”module” src=”url”></script> scope a nivel de archive
- Functional, block,global,module scope
d) Closures
- IIFE “(function(){})()” se declara y ejecuta
-
e) This
- Objeto que actualmente está ejecutando el bloque de código
f) call, apply y bind
Establece el valor del this
- function.call(this,arg1,arg2,etc)
- function.apply(this,[arg1,arg2,etc])
- x= function.bind(objThis,arg1); x.subFunction(arg2,etc)
g) prototype
[para que funciones actuen como clases]
- no accesibles directamente
- funciones prototype son heredables
h) Parsers y Abstract Syntax Tree
i) Event Loop
j) Promesas
- “Promises.all” devuelve todos los resultados de las promesas
- “Promises.race” devuelve la promesa resuelta más rápida
k) Proxys
- “new Proxy(obj,handler)” para hacer algo antes de un get, set, etc.
l) Fetch
- Peticiones al servidor cancelables
-
m) IntersectionObserver
- Para observar elementos en pantalla
n) VisibilityChange
- Evento cuando no se cambia de pestaña o navegador
o) ServiceWorkers
- Guardar en caché archivos que se obtienen por peticiones get
p) TypeScript
q) Patrones de diseño
Resuelve problemas
- Beneficios: soluciona problemas comunes de diseño de software y provee un lenguaje común
- Críticas: Introducen complejidad
- Categorias:
a) Creacionales: Builder (Crea un objeto a partir de otro), composición, singleton.
- Patron observer: Sujeto-Observador;
- Patron Decorator: Las clases deben estar cerradas para modificación, pero abiertas para ser
extendidas.
r)
III. ReactJS
React es declarativo
Prettier como extensión
a) JSX
Javascript con html
b) Componentes vs Elementos
Componentes encapsulan funcionalidades usando elementos
c) Creando componente; agregando imágenes y estilos
d) Props
e) Polling: Peticiones al servidor cada cierto periodo de tiempo
f) Componentes presentacionales y conteiners
Dividir un componente que haga consulta al servidor y pinte los datos
g) Portales: Se puede usar con modales para evitar problemas de z-index
h) UseMemo: Para optimizar busquedas
IV. ReactJS práctico
Nace en 2013 por Facebook
a) VirtualDom
- Tenemos una copia del DOM
- Refresca solo partes modificadas del DOM
b) Tipos de componentes
- Statefull
- Stateless
c) Babel: permite dar compatibilidad del código con todos los navegadores
d) Webpack: Agrupa archivos
e) Eslint
f) React hooks
V. Postman
Herramienta para testear APIs
a) HTTP
Protocolo (reglas de comunicación entre computadores)
- Verbos: GET (Solicitar), HEAD (GET sin contenido), POST (Enviar datos), PUT (Reemplazar un
recurso completo), DELETE (eliminar recurso)
- Status Code: 1xx (Recibida y procesada), 2xx (recibida, procesada y correcta), 3xx (Acciones
adicionales), 4xx (Errores del cliente), 5xx (Errores del servidor)
200 -> correcto
201 -> post correcto
204 -> correcto, pero no devuelve info
400 -> bad request
401 -> Unauthorized
403 -> Fordibben
404 -> No existe recurso
500 -> Error de servidor
-
b)
VI. Webpack
Empaquetador de modulos para aplicaciones JS
VII. GraphQL
Nuevo paradigma para comunicar información.
Evolucion de REST.
Creado por Facebook en 2015
Lenguaje agnóstico, validación, errores, documentación autogenerada.
a) Schema y types
- Tips de dato: String, Int, Float, Boolea, ID
- buildSchema(``) para generar esquemas
- graphql(schema,resolvers).then(data=>{console.log(data)})
b) Argumentos
- Graphql -> buildSchema
- Graphql-tools ->makeExecutableSchema
c) Configuracion base de datos
- Archivo .env simula variables de entorno, requerir con “require(‘dotenv’.config())”
- Require(‘mongodb’)
d)
VIII.
