Unidad 2: Lenguajes,Framework & Librerias Frontend
Lengujes de Programación Frontend
¿Cómo funciona React?
¿Cómo funciona el DOM virtual?
Python
Es un lenguaje de scripting independiente de plataforma y
orientado a objetos, preparado para realizar cualquier tipo de programa,
desde aplicaciones Windows a servidores de red o incluso, páginas web.
Es un lenguaje interpretado, lo que significa que no se necesita
compilar el código fuente para poder ejecutarlo, lo que ofrece ventajas
como la rapidez de desarrollo e inconvenientes como una menor velocidad.
En los últimos años el lenguaje se ha hecho muy popular, gracias a varias razones como:
- La cantidad de librerías que contiene, tipos de datos y funciones incorporadas en el propio lenguaje, que ayudan a realizar muchas tareas habituales sin necesidad de tener que programarlas desde cero.
- La sencillez y velocidad con la que se crean los programas. Un programa en Python puede tener de 3 a 5 líneas de código menos que su equivalente en Java o C.
- La cantidad de plataformas en las que podemos desarrollar, como Unix, Windows, OS/2, Mac, Amiga y otros.
- Además, Python es gratuito, incluso para propósitos empresariales.
Python aplicado a Data Science
Aquí nos encontramos con una de las principales claves del crecimiento
exponencial del interés sobre Python en estos últimos años. De la mano de Data
Science como una de las profesiones mejor valoradas, cuya base se asienta en
lenguajes matemáticos como R y con Python gracias a librerías y framework como PyBrain,
NumPy o PyMySQL.
Utilizando estas herramientas podemos hacer muchas más cosas que recolectar
y clasificar información, creando scripts para automatizar procesos, además de
preparar dashboard con esa información.
El punto de entrada para comenzar a trabajar en Data Science es
tener una buena base de Python. Muchos de los cursos que podemos
encontrar en Coursera o Udacity giran entorno a Python: Python for Data Science
ofrecido por IBM en Coursera o el nanodegree programa Become a Data Analyst en
Udacity.
Machine Learning de la mano de Python
El auge del Deep Learning con algunos framework como Tensor
Flow también ha motivado a muchos desarrolladores a aprender Python.El carácter exploratorio de machine learning se ajusta a la perfección a
Python, así nos podemos encontrar librerías como Keras, PyBrain o scikit-learn
para realizar tareas de clasificaciones, regresión, clustering,
preprocesamiento o generación de modelos de algoritmos.
Al igual que ocurre con los cursos propuestos para comenzar con data
science, en machine learning ocurre bastante similar, aunque podemos utilizar
Java o Scala, Python sigue siendo un lenguaje dominante en el ámbito academico
ya que se ajusta a la perfección a la hora de implementar las bases de machine
learning.
Podemos echar un vistazo a un amplio número de cursos relacionado en Coursera
o Udacity en los que comenzamos con las bases de Python.
Desarrollo web con Python
Sobradamente conocido nos encontramos con Django, el framework de
aplicaciones web gratuito y open source escrito en Python. Tampoco es un recién
llegado y es utilizado en producción por empresas con Instragram, Pinterest o
The New York Times. A este framework de Python le podemos sumar algunos igual de interesante
como el minimalista Flask o Pyramid. Además de estos framework podemos destacar
la importancia para crear APIs Restful o graphql con librerías
como Graphene.
Python para Devops
La accesibilidad y flexibilidad de Python también es una de las razones para
preferir este lenguaje en DevOps. Es estupendo para realizar scripts y
automatizar proceso. El hecho de que herramientas como Ansible y SaltStak
estén escritas en Python demuestran las capacidades del lenguaje para tareas de
automatización y orquestación. Al igual que hablamos de los cursos de data
science o machine learning, también podemos destacar cursos para System Admin
utilizando Python 3.
Javascript
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 se diseñó con una sintaxis similar a C, aunque adopta nombres y
convenciones del lenguaje de programación Java. Sin embargo, Java y JavaScript
tienen semánticas y propósitos diferentes.
Todos los navegadores modernos interpretan el código JavaScript integrado en
las páginas web. Para interactuar con una página web se provee al lenguaje
JavaScript de una implementación del Document Object Model (DOM).
Typescript
Es un lenguaje de programación de código abierto
desarrollado por Microsoft, el cual cuenta con herramientas de
programación orientada a objetos, muy favorable si se tienen proyectos
grandes. Anders Hejlsberg, arquitecto principal del desarrollo del
lenguaje de programación C#, es el principal participante en el
desarrollo de este lenguaje. TypeScript convierte su código en Javascript común. Es llamado
también Superset de Javascript, lo que significa que si el navegador
está basado en Javascript, este nunca llegará a saber que el código
original fue realizado con TypeScript y ejecutará el Javascript como
lenguaje original.
¿Qué es un superset?
Se trata de un lenguaje escrito sobre otro lenguaje. En este caso
Typescript es eso, un lenguaje basado en el original, ofreciéndonos
grandes beneficios como el descrito anteriormente, aunque existen otros
beneficios. Por ejemplo, mientras otros superset de JavaScript nos
alejan del código original, Typescript, por el contrario, es muy similar
a Javascript y a C# gracias a que su creador posee conocimientos de
ambos lenguajes.
Actualmente Angular 2, uno de los frameworks más famosos de
JavaScript, está siendo desarrollando en TypeScript, para lo cual
conocer este lenguaje será fundamental para entender y darle un mejor
uso a la nueva versión de Angular.
Dart
Es un lenguaje
de programación de código abierto, desarrollado por Google. Fue revelado en la
conferencia goto; en Aarhus, Dinamarca el 10 octubre de 2011. El objetivo de Dart no es reemplazar JavaScript como el
principal lenguaje de programación web en los navegadores web, sino ofrecer una
alternativa más moderna. El espíritu del lenguaje puede verse reflejado en las
declaraciones de Lars Bak, ingeniero de software de Google, que define a Dart
como un “lenguaje estructurado pero flexible para programación Web”.
Coffeescript
Es un
lenguaje de programación que se compila a JavaScript. El lenguaje añade azúcar
sintáctico inspirado en Ruby, Python y Haskell para mejorar la
brevedad y la legibilidad de JavaScript, y añade características más
sofisticadas, como la comprensión de listas y la coincidencia de patrones.
CoffeeScript compila previsiblemente a JavaScript y los programas se pueden
escribir por lo general en 1/3 menos de líneas de código sin ningún efecto en
el rendimiento ni en el tiempo de ejecución.
Frameworks
Angular
Es un framework para aplicaciones
web desarrollado en TypeScript, de código abierto, mantenido por Google, que se
utiliza para crear y mantener aplicaciones web de una sola página. Su objetivo
es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista
Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas
sean más fáciles.
La biblioteca lee el HTML que contiene atributos
de las etiquetas personalizadas adicionales, entonces obedece a las directivas
de los atributos personalizados, y une las piezas de entrada o salida de la
página a un modelo representado por las variables estándar de JavaScript.
Angular se basa en clases tipo
"Componentes", cuyas propiedades son las usada para hacer el binding
de lo datos. En dichas clases tenemos propiedades (variables) y métodos
(funciones a llamar).
Vue
Es un framework open source de JavaScript, el
cual nos permite construir interfaces de usuarios de una forma muy sencilla. La
curva de aprendizaje, desde mi punto de vista, es relativamente baja, se debe
conocer muy bien JavaScript, saber trabajar con callbacks, promesas, objetos,
entre otros temas más.
Características:
- Accesible.
- Versátil: Su núcleo es bastante pequeño y se escala a través de plugins, con lo cual escucharás mucho que Vue es una librería muy parecida a React, una librería que cumple un propósito.
- Escalable por el mismo tema de la versatilidad.
- Reactivo.
- Optimizado: Su core ocupa 74KB, como ves es bastante liviano.
- Comunidad: Va creciendo a un ritmo importante con más 66500 estrellas en GitHub y 130 personas contribuyendo al core cada día.
- Licencia MIT: se publicó bajo el amparo de esta licencia.
Next
Es un
pequeño framework construido sobre React.js que viene a ayudar a reducir esta
fatiga. ¿Cómo? Next nos permite, instalando una sola
dependencia, tener configurado todo lo que necesitamos para
crear una aplicación de React usando Babel, Webpack, server render y muchas
otras técnicas como HMR o separación de código, también permite
un fácil despliegue de nuestras aplicaciones.
Reason
No es un nuevo lenguaje; es una nueva sintaxis y
cadena de herramientas que se alimenta por el lenguaje forjado-en-batalla OCaml.
Reason da a OCaml un sintanxis familiar dirigido a programadores de JavaScript
y abastece el flujo de trabajo NPM/Yarn que la gente ya conoce.
En ese sentido, Reason puede considerarse como un
primo más rápido, más simple, sólido y estadisticamente tipificado de
JavaScript, menos el histórico de malos códigos, más las características de
ES2030 que puedes usar hoy, y ¡con acceso a el ecosistema JS y el OCml!
Reason compila a JavaScript, gracias al proyecto
de nuestro socio, BuckleScript, el cual compila Ocml/Reason en un JavaScript
que se puede leer con una interoperabilidad suave. Reason también compila a un
ensamblaje rápido y simple, gracias al propio OCaml.
Foundation
Es un framework de interfaz de usuario
responsive. Foundation proporciona una cuadrícula responsive e incluye
componentes de interfaz de usuario HTML y CSS, plantillas, y fragmentos de
código, incluyendo tipografía, formularios, botones, barras de navegación y otros
componentes de interfaz usuario, así como extensiones de JavaScript opcionales.
Foundation está mantenida por zurb.com y es un proyecto
de código abierto.
Librerias
React
Es una biblioteca escrita en JavaScript, desarrollada en Facebook para facilitar la creación de componentes interactivos, reutilizables, para interfaces de usuario. Se utiliza en Facebook para la producción de componentes, e Instagram está escrito enteramente en React. Uno de sus puntos más destacados, es que no sólo se utiliza en el lado del cliente, sino que también se puede representar en el servidor, y trabajar juntos.¿Cómo funciona React?
React.js está construido en torno a hacer funciones,
que toman las actualizaciones de estado de la página y que se traduzcan
en una representación virtual de la página resultante. Siempre que
React es informado de un cambio de estado, vuelve a ejecutar esas
funciones para determinar una nueva representación virtual de la página,
a continuación, se traduce automáticamente ese resultado en los cambios
del DOM necesarios para reflejar la nueva presentación de la página.
A primera vista, esto suena como que fuera más lento que el enfoque
JavaScript habitual de actualización de cada elemento, según sea
necesario. Detrás de escena, sin embargo, React.js hace
justamente eso: tiene un algoritmo muy eficiente para determinar
las diferencias entre la representación virtual de la página actual y la
nueva. A partir de esas diferencias, hace el conjunto mínimo de cambios
necesarios en el DOM.
Pues utiliza un concepto llamado el DOM virtual que
hace selectivamente sub-árboles de los nodos sobre la base de cambios de
estado, desarrollando esto, con la menor cantidad de manipulación DOM
posible, con el fin de mantener los componentes actualizados,
estructurando sus datos.
¿Cómo funciona el DOM virtual?
Imagina que tienes un objeto que es un modeló en torno a una persona.
Tienes todas las propiedades relevantes de una persona que podría
tener, y refleja el estado actual de la persona. Esto es básicamente lo
que React hace con el DOM.
Ahora piensa, si tomamos ese objeto y le hacemos algunos cambios. Se
ha añadido un bigote, unos bíceps y otros cambios. En React, cuando
aplicamos estos cambios, dos cosas ocurren:
- En primer lugar, React ejecuta un algoritmo de "diffing", que identifica lo que ha cambiado.
- El segundo paso es la reconciliación, donde se actualiza el DOM con los resultados de diff.
La que hace React, ante estos cambios, en lugar de tomar a la persona
real y reconstruirla desde cero, sólo cambiaría la cara y los brazos.
Esto significa que si usted tenía el texto en una entrada y un
actualización se llevó a cabo, siempre y cuando el nodo padre de la entrada
no estaba programado para la actualización, el texto se quedaría sin
ser cambiado.
jQuery
Es una biblioteca multiplataforma
de JavaScript, creada inicialmente por John Resig, que permite simplificar la
manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar
eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas
web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. De acuerdo a un
análisis de la Web (realizado en 2017) JQuery es la biblioteca de JavaScript
más utilizada, por un amplio margen.
jQuery es software libre y de código
abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia
Pública General de GNU v2, permitiendo su uso en proyectos libres y privados.
jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades
basadas en JavaScript que de otra manera requerirían de mucho más código, es
decir, con las funciones propias de esta biblioteca se logran grandes
resultados en menos tiempo y espacio.
Backbone
Es una librería para el desarrollo de sitios web,
principalmente usada para aplicaciones web con bastante interacción con el
cliente, donde se hace un uso intensivo de Javascript, Ajax, etc. Te permite
desarrollar en Javascript atendiendo a patrones, con una variante del paradigma
MVC, el mismo que se ha introducido con fuerza en la programación del lado del
servidor y que, desde hace menos tiempo, viene empezando a ser costumbre en el
desarrollo del lado del cliente.
Brython
Una implementación de Python 3
para la programación web del lado del cliente. No es un código Javascript! En
su lugar, encontrará el código Python en un script de tipo "text /
python". Brython está diseñado para reemplazar Javascript como el lenguaje
de script para la Web. Como tal, es una implementación de Python 3 (puede
tomarlo para una prueba de manejo a través de una consola web), adaptada al
entorno HTML5, es decir, con una interfaz para los objetos y eventos DOM.
Referencias
https://desarrolloweb.com/articulos/1325.php
https://reasonml.github.io/docs/es-ES/what-and-why
Como se puede visualizar los llamados framework y librerías no solo nos facilitan el desarrollo web sino también nos permiten explotar todas las funcionalidades de ellas que a la final generan una página totalmente dinámica incluyendo la animación la cual la hace realmente moderna y gustosa al cliente.
ResponderEliminarLas librerías y los framework son un conjunto de archivos que utilizamos para facilitarnos un poco a la hora de programar. consisten en archivos de código a los que llamamos al principio de la página, por ejemplo, un librería javascript será un archivo en javascript que insertamos al principio de la página.
ResponderEliminarPodemos insertar cualquier archivo al principio de la página, sin embargo no todos los archivos pueden considerarse librerías. Para que un archivo sea una librería, este puede tener que usarse en distintas páginas, no sólo del mismo sitio, sino de varios sitios. Además debe modificar el código de tal manera que nos facilite la inserción.
Este comentario ha sido eliminado por el autor.
ResponderEliminarGracias a la cantidad de framework y librerías que existes hoy día podemos desarrollar mas rapido nuestras web con mayor facilidad. Los frameworks se han convertido en herramientas básicas para el desarrollo de websy aplicaciones ya que permiten optimizar tiempos, costes y prestaciones.
ResponderEliminarEl uso de frameworks no solo es ventajoso a nivel técnico sino también a nivel de equipo. Por un lado, los desarrolladores frontend trabajan en las ‘View’, los especialistas en bases de datos en los ‘Model’ y, por último, el programador backend en la construcción de plugins, etc.
Por otra parte una libreria es uno o varios archivos escritos en un lenguaje de programación determinado, que proporcionan diversas funcionalidades. A diferencia de un framework, una librería no aporta la estructura sobre cómo realizar el desarrollo, sino que proporciona funcionalidades comunes, que ya han sido resueltas previamente por otros programadores y evitan la duplicidad de código. Además reducen el tiempo de desarrollo y aumentan la calidad del mismo.
RAFAEL RANGEL C.I:20200445
Saludos, muy buena información, bastante completa.
ResponderEliminarQuisiera añadir que también para desarrollar aplicaciones moviles podemos utilizar tecnologia parecida a la mencionada.
Ionic es un framework que utiliza Angular y Apache cordova para brindarnos la posibilidad de crear aplicaciones hibridas multiplataforma, usando HTML, CSS y JavaScript con este marco de trabajo podremos desarrollar el front de una app movil.
No solo Ionic, también React Native es un framework para desarrollar aplicaciones moviles, lo mejor es que es mantenido y creado por Facebook y se encuentra en constantes actualizaciones.
Si en contexto existen gran variedad de lenguajes me dio curiosidad este lenguaje de programacion llamado Ruby es un lenguaje con un balance cuidado. Su creador, Yukihiro “Matz” Matsumoto, mezcló partes de sus lenguajes favoritos (Perl, Smalltalk, Eiffel, Ada y Lisp) para formar un nuevo lenguaje que incorporara tanto la programación funcional como la imperativa.
ResponderEliminarA menudo ha manifestado que está “tratando de hacer que Ruby sea natural, no simple”, de una forma que se asemeje a la vida real.
Más allá de lo básico
Ruby tiene un conjunto de otras funcionalidades entre las que se encuentran las siguientes:
Manejo de excepciones, como Java y Python, para facilitar el manejo de errores.
Un verdadero mark-and-sweep garbage collector para todos los objetos de Ruby. No es necesario mantener contadores de referencias en bibliotecas externas. Como dice Matz, “Esto es mejor para tu salud”.
Escribir extensiones en C para Ruby es más fácil que hacer lo mismo para Perl o Python, con una API muy elegante para utilizar Ruby desde C. Esto incluye llamadas para embeber Ruby en otros programas, y así usarlo como lenguaje de scripting. También está disponible una interfaz SWIG.
Puede cargar bibliotecas de extensión dinámicamente si lo permite el sistema operativo.
Tiene manejo de hilos (threading) independiente del sistema operativo. De esta forma, tienes soporte multi-hilo en todas las plataformas en las que corre Ruby, sin importar si el sistema operativo lo soporta o no, ¡incluso en MS-DOS!
Ruby es fácilmente portable: se desarrolla mayoritariamente en GNU/Linux, pero corre en varios tipos de UNIX, macOS, Windows, DOS, BeOS, OS/2, etc.
Visiten este enlace: HTTPS://WWW.RUBY-LANG.ORG/ES/ABOUT/
Perdon este enlace : https://www.ruby-lang.org/es/
ResponderEliminarEl objetivo de diseñar un sitio es garantizar que cuando los usuarios abren el sitio, vean la información en un formato relevante y fácil de leer. Todo inicia por darle al usuario una interfaz agradable y de fácil manejo, procesos que aplicamos a través de este grupo de lenguajes de programación de FrontEnd, junto a sus librerías, que nos permiten trabajar de forma eficaz y amigable
ResponderEliminarDe acuerdo a lo expuesto podemos ver como la tecnología Front End ha evolucionado tanto, que permite integrar elementos interactivos a las páginas Web y evita la ralentización del navegador. La utilización de videos, imagenes animadas, funciones de busqueda, obligaban el uso de excesivo del procesador, gracias a estas tenologías su consumo es poco además de ser elementos atractivos para el usuario final. Por otro lado el conjunto de liberarias posee un código simple que contribuye al desarrollo de web site para el diseñador y programador, atractivos para ellos, ya que la corrección de las lineas de código son mas sencillas.
ResponderEliminarLIBRERÍAS y FRAMEWORKS: JQUERY Es una herramienta en desuso pero muy usada para el desarrollo de una web muy interactiva, en cuanto a Framework Angular JS es muy utilizada, especialmente la versión 2.0 es muy fuerte pero muy útil, en la actualidad ya salió la versión 4. Otro Framework que se está conociendo y que sería muy interesante de aprender en VUE.JS. Uno de los Frameworks que revoluciono en su momento fue METEOR es muy robusto pero limita el desarrollo de lo que se quiere lograr y por ende va en caída libre ya que los programadores han perdido interés en utilizarlo en sus proyectos. REACT es muy revolucionario y es muy utilizado en aplicaciones móviles y su nueva versión REACT NATIVE. (https://platzi.com/cursos/)
ResponderEliminarÚltimamente hay una moda en crecimiento por el uso de librerías y frameworks que facilitan el desarrollo de software y reduzcan considerablemente el tiempo y esfuerzo empleados. Se sabe que en la actualidad nos encontramos con frameworks más complejos para desarrollar aplicaciones cliente como Angular, React o Vue, y también librerías muy dinámicas pero se debe elegir la mejor dependiendo de las necesidades y de lo que se vaya a realizar. Muy importante remarcar la creación de interfaces con propiedades de movimiento o manipulación de estructuras, todo enfocado a facilitarle la navegación al usuario.
ResponderEliminarToda este auge en el desarrollo de Apps y Sitio Web dinamos, también a tenido que ver con el desarrollo de las tecnologías incorporadas en los equipos y creo que el sector con mayo auge han sido los equipos servidores y los móviles o smartphone "teléfonos inteligentes / celulares inteligente", pues nada de estas tecnologías habrían tenido mucho sentido si los equipo que usamos no tuvieran la capacidad para interpretar y desplegar estos código, recuerdo cuando la navegación en los celulares se basaba en paginas WAP, destaco esto porque de la evolución del hardware que usamos tanto en el FronEND como en el BackEND, es lo que a permitido todo esta explosión, el cual de por si es muy importante y necesario, la filosofía del desarrollo a tres capas nos permite aumentar la seguridad de los sitios Web, que el tiempo de ejecución de los códigos y las consultas sean mas rápidas, minimizar el tiempo de desarrollo Web con el reuso de código bien por el uso de los FrameWork y de las Librerías. Y todo esto tiene que ver con los cambios de paradigma o niveles de abstracción en las forma en la que vemos, enfocamos y resolvemos los problemas, pues veníamos de la programación secuencial o lineal, pasamos al enfoque de programación por Objetos, y en el desarrollo Web de hipertexto saltamos a la incorporación de código que bien se ejecuta en el servidor o en el terminal, nada de esto habría sido posible si a la par el hardware o lo que coloquial mente llamamos el hierro no se hubiera desarrollado continuamente.
ResponderEliminarEs el hardware el que a la final interpreta lo que programamos sin hierros buenos que lo soporte no hay piso para el desarrollo, es por esto que destaco este punto como importantísimo para los que estamos en un medio informático y que ademas pretendemos vivir de ellos como un modo de vida o de simplemente un empleo.
Eliminar