Google Polymer cómo cambiará la forma en que se construyen las aplicaciones web
Junto con Google Photos, Google también ha reconstruido Polymer desde cero, abordando la mejora del rendimiento y la eficiencia. Piense en Polymer como un SDK (Software Development Kit) para la Web, uno que hace desarrollo de aplicaciones web Mucho más rápido usando un nuevo estándar llamado Componentes Web.
Los componentes web nos permiten Crea elementos personalizados y etiquetas para nuestros sitios web.. En esta publicación veremos cómo los elementos personalizados en Google Polymer pueden ayudar al desarrollo de aplicaciones web. Además, también veremos algunas demostraciones sobre cómo estos elementos personalizados pueden ponerse a trabajar..
Acerca de los componentes web
La mejor manera de entender cómo funcionan los componentes web es observar los elementos estándar actuales, como . Cuando agregamos junto con las fuentes de URL del audio, los navegadores web representarán este elemento como un reproductor de audio con el botón de reproducción y pausa, la línea de tiempo y el control deslizante de volumen. ¿Alguna vez te preguntaste cómo se construyen y diseñan los controles del jugador??
El jugador de control de UI está oculto debajo como Shadow Roots, también conocido como Shadow DOM. Para ver Shadow DOM, ejecute el Chrome DevTools > haga clic en el Diente icono> seleccionar el Mostrar agente de usuario shadow DOM opción.
En la siguiente captura de pantalla, puedes encontrar una pila de Hoy, con componentes web, también podemos nombrar nuestros propios elementos. Podemos construir un elemento como, Además, estos elementos personalizados también pueden tener un par de atributos personalizados aceptados. Respecto a la Polymer viene con un montón de elementos que representan (casi) todas las necesidades de las aplicaciones web. Google divide estos elementos en grupos: Elementos de hierro, Elementos de papel, Componentes web de Google, Elementos de oro, Elementos de neón, Elementos de platino y Moléculas. Elementos de hierro es una colección de elementos básicos. Estos elementos básicos son los que usamos normalmente para construir una página web tal como una entrada, forma e imagen. La diferencia es que Polymer agrega algunos poderes extra a estos elementos.. Todos los elementos en este grupo son El ejemplo anterior primero mostrará el marcador de posición de la imagen y luego se desvanecerá en la imagen real en el los Elementos de papel Es un grupo de elementos de diseño de materiales. Material Design es un lenguaje de diseño de Google que hace que la interfaz y la experiencia del usuario en las plataformas de Google, tanto las aplicaciones web como las de Android, sean más visualmente coherentes. Algunos elementos que son exclusivos del Diseño de materiales son Papel y Botón de acción flotante (FAB). Papel es la metáfora de Google para El medio que subyace en el contenido.. Para agregar un papel con polímero, usamos el El botón de acción flotante (FAB) es un botón circular con un ícono que flota en la pantalla, generalmente con un color destacado. Google sugiere que este botón lleva una función de acceso frecuente. Aquí hay un ejemplo: El siguiente fragmento de código agrega un Material de papel con una imagen y un FAB. Tendremos el siguiente resultado: Tenemos una foto con un “corazón” botón que flota encima de él. Haga clic en Me gusta la foto, y el botón emite un efecto de onda para reconocer el clic.. Los componentes web de Google son elementos especiales que se adaptan a las API y servicios de Google, como Google Maps, Youtube y Google Feed, por nombrar algunos. Elementos en este grupo Haga que la interacción con los servicios de Google esté a solo unas líneas de distancia.. El siguiente es un ejemplo para mostrar un mapa de Google usando la Como se puede arriba, el ¿Quieres mostrar un video de Youtube? puedes usar el Del mismo modo, personalizamos la salida a través de atributos.. Los elementos de oro son los Elementos diseñados específicamente para aplicaciones de comercio electrónico.. Aquí encontrará el elemento para mostrar la tarjeta de crédito, el correo electrónico, el teléfono y la entrada ZIP que todos han sido equipados con validación de formato Asegurar el correcto ingreso de datos y seguridad. Aquí hay un ejemplo para agregar la entrada de la tarjeta de crédito Visa. Los elementos restantes incluyen elementos de neón para animación y efectos especiales, elementos de platino para notificaciones sin conexión y de inserción y, por último, Moléculas, envoltorios para bibliotecas de terceros. Nota del editor: En el momento de escribir este artículo, los elementos de neón, los elementos de platino y las moléculas todavía no están disponibles.. ¿Quieres usar Polymer en tu desarrollo web? A continuación le indicamos cómo instalarlo e integrarlo en sus páginas web. Como la mayoría de los elementos de Polymer dependen unos de otros, la mejor manera de instalar Polymer es a través de Bower. Bower es un administrador de dependencias del proyecto que facilita la instalación de scripts o estilos necesarios para ejecutar el proyecto. Consulte nuestra publicación anterior sobre cómo instalar, actualizar y eliminar bibliotecas web fácilmente con Bower. Para integrar Polymer, inicie Terminal y luego navegue hasta el directorio de su proyecto, asumiendo que ha creado uno. Entonces corre Esta configuración asume que vamos a utilizar todos los elementos de cada grupo. Puede eliminar lo que no necesita de la lista de dependencias. A medida que se establecen las dependencias, ejecute el Este proceso puede tardar un tiempo, ya que implica la captura de una gran cantidad de archivos de los repositorios. Una vez hecho esto, deberías encontrarlos guardados en el bower_components carpeta. Abra el archivo HTML en el que desea usar los componentes de Polymer. Dentro del encabezado del documento, vincular el WebComponents.js Cuál es el relleno de polietileno para los navegadores que aún no admiten WebComponents, y importar los archivos componentes usando HTML Import. Aquí hay un ejemplo: Esta configuración nos permitirá utilizar el Estas son algunas de las aplicaciones web que ya están utilizando Google Polymer. Google utilizó Google Polymer en la página web de Google IO 2015; Google Fi, el servicio inalámbrico de Google para operadores y proveedores en asociación; y Google Music. CustomElements es un centro donde puede encontrar elementos personalizados creados con componentes web. Hace uso del elemento Papel para contener y construir la lista. También proporciona una ruta conveniente para instalar estos elementos a través de Bower y NPM. Una aplicación de Chrome para la edición de código que funciona sorprendentemente bien. Esta aplicación utiliza el botón FAB, el menú Papel y los elementos de diálogo Papel en la interfaz de usuario. Una herramienta para crear aplicaciones web con elementos de polímero utilizando una interfaz de arrastrar y soltar. Un informe bursátil y pronóstico construido enteramente con elementos de polímero.. Una aplicación de cliente de correo electrónico para Gmail. Se ve bonito y fluido, aunque, lamentablemente, no funciona completamente.. El polímero tiene un alcance enorme y puede llevarte un tiempo acostumbrarte a todos los elementos personalizados, así como a su API. No obstante, Web Components y Polymer ciertamente influirán en la forma en que construimos aplicaciones web. Manténgase por delante de la multitud leyendo más acerca de los componentes web: las referencias se encuentran a continuación. Elementos que construyen los controles de jugador de interfaz de usuario en secreto.. 
nombre de usuario que se utilizará para especificar el nombre de usuario de Twitter.
Elementos personalizados en polímero
1. Elementos de hierro
planchar- prefijo, por ejemplo precarga, descolorarse, y marcador de posición atributos:
src ya que esta completamente cargado, realizando un efecto de carga de imagen suave.2. Elementos de papel
Papel
elevación Para levantar el papel, por lo tanto, agregando una sombra para reforzar la elevación.animado Se aplicará la animación como el cambio de elevación del papel..Botón de acción flotante (FAB)
3. Componentes web de Google
latitud y longitud para especificar la ubicación en el mapa. También podemos anidar
4. Elementos de oro
5. Otros elementos
Polímero de integración
Bower Init comando para iniciar el archivo bower.json en su proyecto que se utilizará para registrar las dependencias del proyecto. Abre bower.json y agrega las siguientes líneas. "dependencias": "polímero": "Polímero / polímero # ^ 1.0.0", "componentes de google-web": "GoogleWebComponents / google-web-components # ^ 1.0.0", "elementos de hierro": " PolymerElements / iron-elements # ^ 1.0.0 "," paper-elements ":" PolymerElements / paper-elements # ^ 1.0.0 "," gold-elements ":" PolymerElements / gold-elements # ^ 1.0.0 "
instalación de la glorieta comando para instalar las dependencias en la lista.
Vitrinas
Google
Elementos personalizados
Chrome Dev Editor
Diseñador de polímeros
Previsión diaria de stock
Correo de polímero
Pensamientos finales
Referencias útiles
