Share
Actualmente se habla de los componentes web y con entusiasmo como un próximo "cambio tectónico para el desarrollo web" con la promesa de remodelar permanentemente el panorama del diseño web. Los grandes jugadores están avanzando para hacer realidad los componentes web. Tanto Google como Mozilla ya están implementando gradualmente la compatibilidad con navegadores nativos.
¿Qué componentes web pides? En pocas palabras, los componentes web le brindan una manera de crear sus propios elementos HTML personalizados que pueden hacer casi cualquier cosa que necesite. En lugar de cargar sus sitios con marcado detallado, secuencias de comandos largas y código repetitivo, envuelve todo en pequeños elementos HTML personalizados y ordenados..
La forma más fácil de entender cómo los componentes web permiten elementos HTML personalizados es mirar primero un elemento existente que ya conocemos de HTML5: el etiqueta. Usando este elemento, puede colocar un video con solo unas pocas líneas de código, por ejemplo:
Es posible que solo vea algunas líneas de HTML arriba, pero esto es lo que El elemento realmente se ve detrás de las escenas:
De manera predeterminada, el navegador oculta todo ese código detallado para que no necesite verlo o preocuparse por escribirlo cuando quiera colocar un video. Solo golpeas en tu y
Anteriormente, solo los proveedores de navegadores podían crear elementos de esta manera. Pero imagínate si pudieras utilizar este mismo enfoque con otros tipos de contenido.?
Tome una presentación de imágenes, por ejemplo. Por lo general, necesitaría algunas rondas de divs anidados con nombres de clase específicos para envolver la presentación de diapositivas, envolver cada diapositiva y agregar leyendas y miniaturas. También necesitaría configurar cualquier opción de presentación de diapositivas general para cosas como efectos de transición de diapositivas a través de algunos jQuery / JavaScript en línea.
¿Qué pasaría si pudiera omitir todo eso y en su lugar simplemente utilizar:
Con los componentes web, eso es exactamente lo que puedes hacer..
Si desea proporcionar un método conciso y fácil de interactuar con la colocación de contenido que de otro modo estaría inflado y difícil de manejar, puede continuar y crear su propio componente web..
Los componentes web también se pueden compartir fácilmente, por lo que, a medida que los desarrolladores se unan, hay una buena opción de que solo puede tomar un componente web creado previamente para los requisitos más comunes del proyecto. Ya estamos viendo que los componentes compartidos libremente aparecen para todo, desde el reconocimiento de voz ...
a los constructores de presentaciones ...
a la generación de código QR.
Echemos un vistazo a lo que hay detrás de la cortina de componentes web..
Los componentes web, tal como existen en este momento, se componen de cuatro partes:
Los elementos personalizados son exactamente como suenan: elementos que pueden ser nombrados como elijas y operan de la forma que quieras. Y cuando digo algo, realmente lo digo en serio. Por ejemplo, presento el
Demostración en vivo - pasa el ratón sobre la barraLos elementos personalizados se declaran, en su forma más simple, así:
...
Cuando crea un elemento personalizado, puede hacerlo completamente desde cero o puede extender un elemento HTML existente, como por ejemplo, y dale la funcionalidad o presentación modificada que necesitas.
...
Nota: vale la pena señalar que la
El DOM de Shadow es realmente el aspecto central de cómo funcionan los componentes web. Anteriormente, nos fijamos en el HTML5. Elemento y muestra cómo, a pesar de solo ver unas pocas líneas de código, en realidad hay un poco de código oculto por defecto. El lugar donde vive este código oculto se llama "Shadow DOM".
Los proveedores de navegadores han estado utilizando este DOM de sombra durante años para implementar de forma nativa elementos como entrada, audio, video, etc. A través de componentes web ahora puede ser utilizado por cualquier desarrollador..
La idea general es que usted toma todo el código que realmente no necesita ser visto durante la colocación del marcado y lo oculta en el DOM de Shadow para que no se interponga en el camino. Esto le deja solo tener que tratar con la información pertinente, por ejemplo, la altura, el ancho y las ubicaciones de los archivos de origen al utilizar el elemento.
Una de las mejores cosas de trabajar con Shadow DOM es que cada instancia es su propio mundo pequeño y autónomo. Por lo tanto, si tiene estilos y secuencias de comandos dentro del elemento, no se filtrarán accidentalmente y afectarán a cualquier otra cosa en la página..
A la inversa, CSS y JavaScript en otras partes de la página no afectarán su componente web, con la excepción de los ganchos de estilo que puede crear específicamente para permitir la orientación de CSS externa. Todo eso significa que ya no tendrá que preocuparse por el espacio de nombre de su identificación y nombres de clase para evitar conflictos..
Si quieres ver cómo es la sombra DOM, es fácil. Asegúrese de que está ejecutando una instalación actualizada de Chrome, abra las Herramientas de desarrollo, haga clic en el icono de engranaje para abrir la configuración y marque la casilla etiquetada Mostrar agente de usuario shadow DOM:
Luego, cuando inspeccionas cualquier elemento con un DOM de sombra, verás su código completo. Pruébelo inspeccionando el
Para un resumen completo en la sombra DOM echa un vistazo: Introducción a la sombra DOM
Ya hemos cubierto cómo los elementos personalizados permiten que solo se centre la información pertinente mientras que todo el código restante está oculto en el DOM de la sombra. Una plantilla dentro de un componente web es lo que contiene todos los elementos de presentación de ese código restante.
Como parte del código que define el componente web las etiquetas ... se colocan, y entre esas etiquetas se incluyen las necesidades de los componentes HTML y CSS.
Por ejemplo, eche un vistazo al código que creó el la etiqueta está en la línea 4 y su cierre la etiqueta está en la línea 201. Entre esas etiquetas verá todos los responsables de CSS para crear el posicionamiento y la animación, y el HTML que coloca cada una de las imágenes involucradas.
Las importaciones de HTML le permiten tomar todo lo descrito anteriormente y hacer que funcione en su página. Los componentes web se definen dentro de un archivo HTML externo, por lo que ese archivo debe importarse para que funcione un elemento personalizado. Las importaciones de HTML manejan esto a través de etiqueta, con la que estará familiarizado al importar archivos CSS externos.
Por ejemplo, antes de poder usar el
Las posibilidades que ofrecen los componentes web hacen que la idea de bucear sea la primera en utilizarlos de forma muy atractiva, sin embargo, en este momento el soporte del navegador aún no es viable. El estado actual de soporte se ve así:
http://jonrimmer.github.io/are-we-componentized-yet/El soporte nativo está en proceso de implementarse para Chrome, Opera y Firefox, pero aún no está completo. IE y Safari aún no han dado a conocer sus planes, sin embargo, se piensa que, dado que la mayoría de los navegadores admitirán componentes web, en última instancia, es probable que los otros exploradores sigan su ejemplo..
En este momento, si desea comenzar a trabajar con componentes web, deberá utilizar uno de los rellenos automáticos disponibles. La buena noticia es que dos de las soluciones más populares son creadas por Google y Mozilla, por lo que podemos esperar cierta coherencia con la forma en que funcionará finalmente el soporte nativo.
Es difícil no inclinarse hacia el uso de Polymer dado que Chrome es ahora el navegador más utilizado, y puede suponer que se considerará durante el desarrollo cómo Google indexará el código del componente web..
Polymer viene con una biblioteca completa de componentes web precompilados. Incluye los "Elementos del núcleo de polímero" que están orientados funcionalmente, y los "Elementos de papel" que están orientados al diseño.
Al crear elementos personalizados con Polymer, en lugar de utilizar el formato
Polymer se describe a sí mismo como una "vista previa del desarrollador" en lugar de estar absolutamente listo para la producción, sin embargo, también dicen
… A pesar de la etiqueta, muchas personas ya han tenido éxito usando Polymer en la producción.
Si necesita atender a IE9, que se estima que tiene alrededor del 1,9% al 5,11% de la cuota de mercado, lamentablemente no tendrá suerte con Polymer. Sin embargo, todavía puedes ir con las X-Tags de Mozilla..
X-Tags es una biblioteca de JavaScript creada por Mozilla que, en la actualidad, tiene una ventaja sobre Polymer, ya que el soporte de su navegador es más amplio. Si esa es una consideración importante para usted, X-Tags puede ser su preferencia..
En este momento, si necesita compatibilidad con IE8, desafortunadamente, los componentes web probablemente no sean para usted, ya que los polyfills disponibles son compatibles con IE9 +. Se estima que los usuarios de IE8 están en torno al 2,1% a 3,82%, pero, por supuesto, si sus propias estadísticas dicen lo contrario, tendrá que emitir un juicio sobre cuánto debe retrasar el soporte de su navegador..
Una posible manera de prepararse para la transición al uso de componentes web es trabajar con Ember.js o AngularJS por el momento. Ambos tienen sus propios sistemas de creación de componentes y ambos prometen una transición hacia la utilización del código de componente web nativo cuando esté completamente disponible.
Espero que hayas disfrutado leyendo este resumen de qué son los componentes web y por qué te debería importar. Hay mucho más para sumergirse, pero con estos fundamentos cubiertos, tenemos muchas oportunidades para tutoriales sobre cómo construir componentes web personalizados. ¿Qué piensas? ¿Bajo qué circunstancias podrías verte usándolos??
Accentsconagua