Skip to content

Latest commit

 

History

History
1524 lines (1206 loc) · 58.8 KB

clase1.md

File metadata and controls

1524 lines (1206 loc) · 58.8 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Curso de JavaScript Avanzado para desarrolladores Front-end

POO con JS, ECMA6, Patrones de diseño, AJAX avanzado, HTML5 avanzado, APIs externas.

Clase 1

Normas y demás

  • Puntualidad
  • Liquidos y comida
  • Ubicación
  • Cafeteria, cajeros, farmacias, etc...

Metodología

  • Descansos
  • Gestión del curso en GitHub
  • Comunicación fuera de clase
  • Repositorio común
  • Toda la teoría, prácticas y recursos
  • Proyectos personales
  • Prácticas y "deberes"
  • Repasos, para afianzar lógica

Sobre el profesor

panda_developer

Bio: "#Maker, #IoT, #OpenSource | #JavaScript, #Node, #Python | Co-organizador de @os_weekends | Profe en @fictiziaescuela | Mentor en @TetuanValley | Autor de #JavaScriptInspirate | Freelance | xIBMer"

Redes Sociales:

Hablemos de la web

El largo camino del desarrollador web

  • Front-End
  • Back-End
  • Full-Stack
  • Dev Ops
  • etc...

Arquitectura de Internet

Navegación

img

Hosting

img

CMS (Back-End)

img

CDN (Content Delivery Network)

img

Tracking

img

W3C - World Wide Web Consortium

img

Front-end

HTML

img

HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.1

El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.HTML Wikiwand

  • Versiones:
    • HTML 1.0 (1991)
    • HTML 2.0 (1995)
    • HTML 3.2 (1997)
    • HTML 4 (1997)
    • HTML 4.01 (1999)
    • HTML 5 (2014)

CSS

img_logo

Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.CSS Wikiwand

JavaScript

js_logo

JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. JavaScript Wikiwand

Características

  • Multiparadigma
  • Imperativo y estructurado
  • Dinámico
    • Tipado dinámico
    • Objetual
    • Evaluación en tiempo de ejecución
  • Funcional
    • Funciones de primera clase
  • Prototípico
    • Prototipos
    • Funciones constructoras
  • Entorno de ejecución
  • Funciones varídicas
  • Funciones como métodos
  • Arrays y la definición literal de objetos
  • Expresiones regulares

ECMA-262

Back-end

Node.js

Node_logo

Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación ECMAScript, asíncrono, con I/O de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google. Fue creado con el enfoque de ser útil en la creación de programas de red altamente escalables, como por ejemplo, servidores web. Fue creado por Ryan Dahl en 2009 y su evolución está apadrinada por la empresa Joyent, que además tiene contratado a Dahl en plantilla - Wikipedia

Otra manera es posible

bloqueo

Puntos Fuertes

  • Asincronía (no bloqueo)
  • Backend completo
  • NPM (comunidad)
  • Single thread (paralelismo)
  • Librerías propias
  • Utilidades
  • Código abierto
  • Basado en el V8 (escrito en C++) de Google
  • Multiplataforma
  • Orientado a Eventos
  • No se limita solo a servidores HTTP

Librerías interesantes

Más Back-end

NoBackend

Stack

  • LAMP:
    • Linux
    • Apache
    • MySQL
    • PHP
  • MEAN:
    • MongoDB
    • Express
    • Angular
    • Node

Bases de datos

Entorno de desarollo moderno

Diversos Entornos

Desarrolladores de hoy

JSDramas

Cambios, cambios... y más cambios

humor

The Magpie Developer

The Sad State of Web Development

Fatiga y tendencias

Herramientas

Documentación

C9.io

c9_logo

Características estrella

  • Code together in real time
  • Share your IDE, your workspace, a preview, or your running app
  • Replay all edits and see your code at any point in time

Otras características

  • Preview in any browser
  • Built-In Terminal
  • Language Tools
  • Debugger
  • Split View
  • Themes
  • Run Panel
  • Key Bindings Editor
  • VIM/Emacs/Sublime Mode
  • Built-In Image Editor

Más

Comunidad

Libros

Charlas recomendadas

Otros/Inspiracionales

CSS

JS

Listados

Developers Importantes a los que seguir...

Listados

Blogs, posts, etc...

Medium

Youtubers, charlas, etc...

Meetups y eventos

JavaScript en Acción

  • The scraping machine

    • Alto nivel de abstracción para el usuario final
    • Soporte como aplicación de terminal con Vorpal
    • Generación dinámica de scripts en varios lenguajes (JS, Python, etc...)
    • Gestión de procesos hijos de forma nativa
    • Instalación global como módulo de NPM

  • Simple hangouts bot

    • Aislamiento del core para mejorar la portabilidad usando patrones
    • XMPP Protocolo
    • Soporte de operaciones en terminal
    • Soporte para la instalación como dependencia de NPM
    • Extensión de por API interna
    • Incorporación de servicios externos como Alchemy (Inteligencia Artificial como servicio)
    • Gestión de la asincronía
    • Array de objetos
    • Gestión de notificación y ayuda al usuario
    • Detección de eventos de Error y cierre del sistema

  • GingerCode

    • Orientado a nuevos programadores
    • Pseudocódigo funcional
    • Alto nivel de abstracción
    • Isomórfico

  • GoblinDB

    • Base de datos reactiva
    • Almacenamiento Asíncrono
    • Patrones de diseño (Namespace, Façade, etc...)
    • Ambush Functions, funciones Lambda a demanda
    • Soporte a Eventos

  • OSWaldito

    • Orientado a IOT
    • Comunciación I2C
    • Movimiento controlado por WebSockets
    • Renderización en cliente de VR usando three.js
    • Stream de vídeo bajo demanda frame a frame
    • Uso del sintetizador de voz nativo de Chrome
    • Gestión de redes sociales

  • Slack Canal Directo

    • Orientado a la gestión de redes sociales
    • Escucha activamente conversaciones en Google Hangouts
    • Envía mensajes en Google Hangouts
    • Envía mensajes en Slack
    • Envía mensajes al azar clasificados por prioridad en Slack
    • Envía mensajes de Error y estado al administrador en Goolgle Hangouts
    • Puede ser desplegado en multiples entornos (Raspbian, Linux, OSX, Windows, C9...)
    • Permite desplegar multiples avatares y personalidades desde la configuración para comunicarse en Slack

  • Know Your SNPs

    • Proyecto BioTecnológico
    • Analiza ADN
    • Permite buscar dentro del ADN ciertos patrones
    • No almacena datos
    • Futura migración a aplicación de escritorio
    • Formulario para realizar nuevas queries (desarrollo) sin tener que programar

  • protoUnicorn

    • Librería de utilidades para JavaScript
    • Utiliza los mejores métodos de librerias extendidas como Lodash o Underscore
    • Añade estos métodos a nuestro JavaScript mediante prototype

  • Spotymix

    • Permite crear nuevas playlist
    • Fusiona canciones de diversas playlist
    • Permite juntar tus mejores canciones con las mejores canciones de otro amigo
    • Social Login integrado

  • JSDayES golosinas IOT

    • Orientado a IOT
    • Comunicación Serial
    • Gestión de dispositivos externos
    • No necesita HTTP

  • Raspi - System Info to Firebase

    • Partiendo de otro repositorio/proyecto.
    • Monitorización del sistema
    • Uso de comandos de terminal
    • Gestión de procesos inestables
    • Integración con soluciones No-backend
    • Tiempo Real
    • No necesita HTTP

  • IT Pulse

    • Partiendo de otro repositorio/proyecto.
    • APIs de terceros
    • Stream directo de datos
    • Servidor Http
    • Tiempo Real y sincronía con WebSockets
    • Eventos
    • Evaluación semántica de la información
    • Sin Bases de datos

  • MovieFire

    • Integración con soluciones No-Backend
    • FrontEnd con Jade
    • BackEnd Flexible y dinámico
    • APIRest Cliente -> Servidor
    • BackEnd con Express
    • CORS y Ajax

  • AireMadrid

    • Arquitectura alternativa en versiones anteriores
    • Conversión y parseo a Json
    • Procesamiento de datos en bruto
    • APIRest
    • Operaciones cíclicas gestionadas por Pillarsjs
    • FrontEnd con Jade
    • BackEnd con Express
    • Documentación con JSDocs

  • AireMAD

    • Evolución de Aire Madrid
    • Scraping
    • Fuentes de datos Alternativas
    • Backend con Pillarsjs
    • Frontend con Angularjs
    • Permanencia de datos con GoblinDB

  • Calidad del Aire con Firebase

    • Manejo de comunicación serial
    • Eventos y asincronía
    • IoT

  • Curratelo

    • APIs de terceros
    • Stream directo de datos
    • Servidor Http
    • Tiempo Real y sincronía con WebSockets
    • Automatización con Slack y Hangouts

Control de Versiones

Bienvenidos a la maquina del tiempo

  • Arquitectura de Árbol(working area, staging Area, Repository)
  • Auditoria de código (quien? cuando? y que?)
  • Git trabaja en binario (imagenes, docs, etc...)
  • Git no guarda una copia de cada version, solo los cambios.
  • Distribución (Repositorios y Clones)
  • Opensource y funciona offline
  • Consola vs. GUI

Trabajo efectivo

Working Flow

Como trabajar con Git

Github

Trabajando con Git

Instalación

Instalamos Git - Source Code Management

Comprobamos la instalación

git --version

Bienvenidos a la maquina del tiempo

  • Arquitectura de Árbol(working area, staging Area, Repository)
  • Auditoria de código (quien? cuando? y que?)
  • Git trabaja en binario (imagenes, docs, etc...)
  • Git no guarda una copia de cada version, solo los cambios.
  • Distribución (Repositorios y Clones)
  • Opensource y funciona offline
  • Consola vs. GUI

Trabajando en Local

Configuración (entornos):

Repositorios locales y remotos Repositorios locales y remotos

  • System (todos los usuarios)

    • git config --system
    • etc/gitconfig, /usr/local/git/etc/gitconfig

  • Global (mi usuario)

    • git config --global
    • .gitconfig (usuario/root)

  • Project (proyecto)

    • git config
    • /proyect/.git/config

Comandos básicos

data transport commands

versión

git --version

Grabando Nombre

git config --global user.name "nombre"

Comprobando el nombre

git config --global user.name

Grabando Email

git config --global user.email "email"

Habilitando colores

git config --global color.ui true

Ver usuarios en el equipo

git config --global --list

GIT Working flow (local) - Básico

  • help (ayuda)

    • Ayuda general
    git config --global --list
    • Ayuda especifica
    git help push
    • Salir de la ayuda
    q (quit)

  • init (arranque)

    • Buscamos la carpeta (ls, dir...)
    • Arrancando Git
    git init

  • status

    • Verificar estado
    git status

  • add

    • Añadiendo todo
    git add -A
    • Añadiendo todo (como add -A, pero omite los archivos fuera de track)
    git add .
    • Añadiendo un archivo especifico
    git add loquesea

  • commit

    • Comentando el commit
    git commit -m "Mi primer commit"

  • log

    • Verificando el estado de los commits
    git log

  • reset (Reseteamos el proyecto hasta un punto dado (SIN RETORNO!))

    • No afecta al working area ni al Stagging Area, solo al repositorio
    git reset --soft NUMEROCOMMIT
    • No afecta al working area
    git reset --mixed NUMEROCOMMIT
    • Afecta a todos los niveles incluido el working area
    git reset --hard NUMEROCOMMIT

    • En caso de necesitar recuperación. Haz un reset --hard hacia delante, con el número del útimo commit.

      git reset --hard ULTIMOCOMMIT

    • Devolver un archivo de staging a working area

    git reset HEAD nombrearchivo

GIT Working flow (local) - Viajar en el tiempo

  • log

    • Hacemos una copia de seguridad de nuestros commits.
    git log > miscommits.txt

  • checkout

    • Abrimos la maquina de tiempo
    git checkout NUMEROCOMMIT
    • Volvemos a Master
    git checkout master

GIT Working flow (local) - Ramas (Branches)

Ramas (Universos Paralelos) Línea master -> linea estable o principal. Lineas secundarias -> lineas de desarrollo, bugs, experimentos, etc...

  • branch

    • Crear una rama
    git branch NOMBRERAMA
    • Ver ramas
    git branch
    • Cambiar de rama
    git checkout NOMBRERAMA
    • Ver cambios en formato ramas
    git log --oneline --graph --all
    • Borrar una rama
    git branch -d NOMBRERAMA

GIT Working flow (local) - Fusiones (básico)

  • Nos situamos en la rama que absorberá (principal)

    git checkout RAMAPRINCIAL

  • Hacemos el merge

    git merge RAMASECUNDARIA

  • Añadir comentario (o)

  • Guardar y salir (:x)

  • Ramas fusionadas

    git branch

  • Borramos rama

    git branch -d NOMBRERAMA

GIT Working flow (local) - Fusiones (gestión conflictos)

  • Fast-forward (automatizado). No hay conflicto alguno.

    • Nos situamos en la rama que absorberá (principal)
    git checkout RAMAPRINCIAL
    • Hacemos el MERGE
    git merge RAMASECUNDARIA

    • Añadir comentario (o)

    • Guardar y salir (:x)

  • Manual Merge (Conflicto, dos personas tocaron los mismos archivos)

    • Nos situamos en la rama que absorberá (principal)
    git checkout RAMAPRINCIAL
    • Hacemos el MERGE
    git merge RAMASECUNDARIA
    • En consola
    Auto-merging CARPETA/ARCHIVO
CONFLICT (content): Merge conflict in CARPETA/ARCHIVO
Automatic merge failed; fix conflicts and then commit the result.
    • En el editor
    <<<<<<< HEAD
hello world....!!!!!!!
=======
hello world 2 ..!!!
>>>>>>> conflictiva
    • Resuelver y guardar
    hello world 2 ..!!!
    • Comprobamos el estado
    git status
    • commit para la resolución conflicto
    git commit -am "con este commit se arregla el conflicto"
    • Resultado
    *   81a6c1d con este commit se arregla el conflicto
|\  
| * 64b5518 que pasa
* | 29a6348 ahora conflcito..no
|/  
* afe16ae Todo arriba..
* 7c9cc50 Mi primer Commit
    • Borramos la rama (opcional)
    git branch -d NOMBRERAMA

GITHUB Working flow (básico)

  • clone

    git clone https://github.com/twbs/bootstrap.git

  • log

    • Mirar los commits
    git log

GITHUB Working flow (Proyecto desde cero)

  • Creamos los ficheros

  • init

    • monitorizamos los ficheros
    git init

  • commit

    • Añadimos los ficheros en un commit
    git commit -am "Mi primer proyecto"

  • remote

    • Enlazamos con Github
    git remote add origin <--HTTPoSSH-->
    • Comprobamos los detalles
    git remote -v

  • push

    • Mandamos los cambios
    git push origin master

GITHUB Working flow (Proyecto en equipo) El proceso es igual, pero es necesario mantenerse sincronizado.

  • fetch

    • Actualizar origin/master (rama espejo en local)
    git fetch origin

  • merge

    • Fusionar master con origin/master
    git merge origin/master

  • commit

    • Preparamos un commit para subir un cambio a Github
    git commit -am "Nuevo cambio"

  • push

    • Subimos los cambios
    git push origin master

GITHUB Working flow (Proyectos de terceros) Usamos 2 repositorios (ORIGINAL EXTERNO (upstream/master) -> CLON ORIGINAL (origin/master) -> CLON LOCAL)

  • remote

    • Conectamos al fork (origin)
    git remote add origin <--- HTTP --->
    • Verificamos la conexión
    git remote -v
    • Conectamos al remoto (Upstream)
    git remote add upstream HTTTPREPO-UPS
    • Verificamos que tenemos dos enlaces (origin y upstream)
    git remote -v

  • fetch

    • Comprobamos cambios en origin
    git fetch origin
    • Comprobamos cambios con upstream
    git fetch upstream

  • merge

    • Fusionamos upstream con local para actualizarnos
    git merge upstream/master

  • push

    • Subimos cambios a origin
    git push origin master

  • Subimos cambios al upstream (pull-request)

GITHUB Working flow (GitHub Pages Manual) GitHub Pages nos permite hacer una web estática para nuestro usuario o proyectos

  • clone

    • Clonamos el repositorio
    git rclone <-- URL.git -->

  • checkout --orphan

    • Creamos una rama huérfana
    git checkout --orphan gh-pages

  • rm

    • Borramos todos los archivos del directorio
    git rm --rf .

  • add

    • Creamos nuestro index.html y lo añadimos
    echo "Bienvenido a gh-pages" > index.html
git add index.html

  • commit

    • Preparamos un commit para subir el index a Github
    git commit -am "Nuevo cambio"

  • push

    • Subimos el cambio
    git push origin gh-pages

GITHUB Avanzado (Trucos)

  • branch

    • Renombrar rama
    git branch -m NOMBRERAMA NOMBRERAMANUEVO
    • Mostrando todas las ramas (incluido espejos)
    git branch -a

  • add + commit

    • am
    git commit -am "Texto"

  • config

    • Usando un alias
    git config --global alias.NOMBREALIAS 'COMANDO'
git config --global alias.buenlog 'log --oneline --graph --all'
git buenlog

  • pull

    • fecht + merge
    git pull

  • diff

    • Ver lo que has modificado pero aún no has preparado
    git diff
    • Ver los cambios que has preparado y que irán en tu próxima confirmación
    git diff --cached

Trabajando con C9.io

Escenarios básicos:

Quiero subir algo a Github

  1. Verificamos el estado en general.
git status
  1. Nos actualizamos.
git pull
  1. Preparamos nuestro commit (añadimos archivos y añadimos la información adicional)
git add "ARCHIVO"
git commit -m "MENSAJE..."
  1. Actualizamos y enviamos los cambios a Github
git pull && git push

No quiero subir nada a Github, pero quiero estar actualizado

  1. Nos actualizamos.
git pull

Trucos:

  • Para cachear las credenciales y evitar que nos pida usuario y contraseña constantemente:
git config --global credential.helper 'cache --timeout=9999999'

Git cacheará la sesión y no os preguntará el usuario o la password durante 9999999ms (2,7h), o el tiempo que pidamos. Recuerda que debes incluir este comando antes de tu próximo git push

Github API

Resumen

Trabajar con Git/Github tamaño original

Git Drama: Microsfot compró Github

img

Los principales jugadores

img

Terminología

terminologia

Gitlab

logo

Recursos

Otros

Bitbucket

Logo

Recursos

Otros

Ecosistema

Ejercicios

logo

1 - Creamos una cuenta en Github y creamos un workespace con referencia a nuestro repositorio de GitHub en c9.io una vez hayamos recibido la invitación.

2 - Sube tu código a GitHub

  • Crea una carpeta en el repositorio con tu nombre.
  • Una subcarpeta pública y otra privada
  • Crea un archivo Hello Word usando Markdown
  • Comparte la tu carpeta pública con todos nosotros en GitHub

2 - Crea un Gist con el esqueleto de un index.html

3 - Presentate en este issue