Escriba su próxima aplicación web con Ember CLI

 

 

 

  • Clase magistral de CSS moderno avanzado, con Manuel Matuzović
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. El desafío de las elecciones triviales
    2. Nuevas oportunidades
    3. Creemos una aplicación Ember
    4. Usando la CLI de Ember
    5. Usando complementos de Ember
    6. Pruebas
    7. Ir a producción
    8. No sólo para las brasas
    9. El futuro de Ember CLI
      1. Referencias
    10. Otras lecturas

    Ember es un marco web de JavaScript centrado en la creación de aplicaciones web de cliente ricas y ambiciosas. Tecnológicamente, Ember se ha posicionado como el antídoto contra la fatiga exagerada. Es un marco que simplemente no morirá, sino que continúa presionando con cada innovación y con un compromiso con la compatibilidad con versiones anteriores. Si ha estado esperando para probar Ember, ¿por qué no comenzar hoy con Ember CLI? Proporciona una experiencia de desarrollo productiva y rica en funciones. Todo lo que necesita para comenzar y crear una aplicación Ember usando Ember CLI está aquí debajo.

     

    Cuando inicia un nuevo proyecto web o comienza a profundizar en una base de código existente, es probable que esté intentando crear o mejorar una función para sus usuarios. Lo último que desea hacer es dedicar tiempo a personalizar herramientas de compilación y crear infraestructura para desarrollar su aplicación. Si consigue un nuevo cliente, querrá mostrarle las funciones hoy, no una semana después de haber creado un proceso de construcción.

    Como quizás ya sepa, Ember es un marco web JavaScript "obstinado" centrado en crear aplicaciones web cliente ricas y ambiciosas. Tecnológicamente, Ember se ha posicionado como el antídoto contra la fatiga exagerada . Es un marco que simplemente no morirá , pero que sigue avanzando con cada innovación y con un compromiso de compatibilidad con versiones anteriores.

    Ember CLI es la solución compartida de la comunidad Ember para herramientas de front-end. Proporciona una experiencia de desarrollo productiva y rica en funciones lista para usar.

     

    El desafío de las elecciones triviales

    A primera vista, las herramientas de creación de aplicaciones para el usuario parecen demasiado diversas para una solución compartida. Hay demasiados factores a tener en cuenta y cada proyecto tiene sus propias necesidades especiales. Como se indica en la página de documentación de React para " Integración de herramientas ", "Cada proyecto utiliza un sistema diferente para construir e implementar JavaScript".

    ¿Estás usando Rails o .NET? ¿Qué preprocesador CSS estás usando? ¿Su solicitud consta de una sola página o “islas de riqueza”? ¿Está utilizando JavaScript global, definición de módulo asincrónico (AMD), definición de módulo universal (UMD), módulos CommonJS o ECMAScript 6? ¿Qué marco de prueba prefieres?

    Debido a que las necesidades de los desarrolladores varían tanto, las herramientas de compilación de bajo nivel como Gulp, Grunt y Broccoli suelen ser el punto de partida para el desarrollo front-end. Yeoman, Lineman y Brunch nos llevan más allá al generar el texto estándar necesario para diversos casos de uso.

    Entonces, ¿en qué se diferencia Ember CLI? Al hacer de Ember CLI la herramienta de compilación oficial para Ember, la comunidad obtiene un conjunto predeterminado de herramientas que están integradas por 225 contribuyentes de Ember CLI y probadas en batalla las 24 horas del día por la comunidad de usuarios de Ember. Estas herramientas proporcionan convenciones útiles, caminos claros hacia las mejores prácticas y escapan de la carga de elecciones triviales . Como tuiteó Chris Eppstein , refiriéndose al lenguaje Sass, "Creemos que esta coherencia promueve un ecosistema vibrante y que es un beneficio mayor que el enfoque 'perfecto para mí'".

    A algunos desarrolladores les puede resultar difícil renunciar a las opciones en favor de la productividad. Sostengo que debemos convertirnos en expertos en el dominio en el que trabajamos y, para la mayoría de los desarrolladores, ese dominio es la intersección del negocio del cliente y el desarrollo de aplicaciones mantenibles. Francamente, nunca he oído hablar de un equipo de desarrollo que creara herramientas de compilación con las que estuvieran contentos. Sin embargo, he visto que las herramientas de creación personalizadas son desastrosas para los proyectos. Deberías probar Ember CLI antes de intentar crear el tuyo propio.

    Nuevas oportunidades

    Ember CLI no se trata solo de crear activos mejores que antes. Cuando una comunidad se une en torno a una tecnología, surgen nuevas oportunidades de productividad. A continuación se muestran algunas innovaciones que han sido posibles con Ember CLI.

    • Complementos de Ember Estas son bibliotecas que se pueden instalar en una aplicación CLI de Ember y que “simplemente funcionan” sin configuración.
    • Implementación de Ember CLI Esto es para la implementación de front-end convencional.
    • Ember FastBoot Renderice aplicaciones Ember en el servidor para una carga de página inicial más rápida.

    Otro efecto secundario de Ember CLI es que los desarrolladores reciben la última y mejor tecnología, sin siquiera necesidad de saber que existe. Listas para usar, las aplicaciones Ember CLI tienen transpilación ECMAScript con Babel, recarga en vivo durante el desarrollo y una forma sencilla de enviar solicitudes AJAX a un servidor local o remoto.

     

    Creemos una aplicación Ember

    Antes de crear una aplicación Ember CLI, deberá instalar Node.js. Puede descubrir cómo instalarlo en el sitio web de Node.js , o puede utilizar el popular proyecto Homebrew si su computadora ejecuta Mac OS X:

    brew install node

    A continuación, instale Ember CLI:

    npm install -g ember-cli

    Una vez resueltos los requisitos previos, está listo para crear su primera aplicación Ember:

    ember new my-app

    Una vez que haya terminado, vaya al directorio de su aplicación ( cd my-app), ejecútela con ember servey visite localhost:4200para ver su aplicación en acción.

    Usando la CLI de Ember

    Usando la función de planos de Ember CLI, agreguemos algo de carne a nuestra aplicación y mostremos una lista de publicaciones cuando un usuario visita la /postsURL. También puede seguirlo en el repositorio de GitHub adjunto .

    ember g resource posts title:string body:string

    Esto le dice a Ember CLI que genere un postsrecurso: crea una routeentrada en su enrutador, una ruta, una plantilla de publicaciones y un modelo de publicación. El modelo de publicación tendrá atributos de título y cuerpo que se convierten en cadenas.

    Tendremos que recorrer nuestras publicaciones y representarlas en nuestra postsplantilla. El eachayudante hace esto posible en app/templates/posts.hbs.

    {{#each model as |post|}} h3{{post.title}}/h3 hr {{post.body}}{{/each}}

    A continuación, querremos encontrar los datos de nuestras publicaciones y entregárselos a la plantilla cuando el usuario la visite /posts. Buscaremos las publicaciones en el gancho modelo de nuestra ruta de publicaciones, ubicado en app/routes/posts.js.

    export default Ember.Route.extend({ // Add this method model() { return this.store.findAll('post'); }});

    Quizás notes que hemos utilizado la sintaxis abreviada de ECMAScript 6 para objetos para definir el modelmétodo. Debido a que Ember CLI utiliza un transpilador de JavaScript de forma predeterminada, espere ver código JavaScript moderno en la mayoría de las aplicaciones de Ember.

    Podríamos haber escrito algunos objetos JavaScript para los datos de las publicaciones en nuestra ruta aquí y dar por terminado el día, pero vayamos un poco más allá y vayamos a buscar publicaciones desde un servidor.

    Generaremos un servidor web Express para enviar algunos datos a nuestra aplicación.

     

    ember g http-mock posts

    Luego, devolveremos algunos datos ficticios de /api/posts. Edite el server/mocks/posts.jsarchivo generado para devolver algunos datos de la ruta del índice.

    postsRouter.get('/', function(req, res) { res.send({ 'posts': [ // Add these objects { id: 1, title: 'First Post', body: 'Blogging' }, { id: 2, title: 'Second Post', body: 'Blogging again' } ] });});

    Lo último que necesitaremos es un adaptador Ember Data personalizado .

    ember g adapter application

    Para asegurarnos de que Ember Data sepa encontrar las publicaciones en /api/posts, agregaremos un espacio de nombres a nuestro adaptador en app/adapters/application.js.

    export default DS.RESTAdapter.extend({ namespace: 'api' // Add this});

    Ahora, si visitas localhost:4200/posts, verás las publicaciones en todo su esplendor.

    Por supuesto, probablemente querrás conectar tu aplicación a un servidor web real en algún momento del proceso de desarrollo. Cuando esté listo, puede eliminar el servidor simulado y ejecutar su aplicación con la opción de proxy:

    ember s --proxy https://localhost:3000

    En este comando, reemplácelo https://localhost:3000con su servidor web local o remoto.

    Esta es una excelente manera de construir su interfaz de usuario de inmediato y realizar la transición a un servidor web de producción más adelante.

    Usando complementos de Ember

    Si está familiarizado con el uso de Bower y npm para instalar dependencias, entonces Ember Addons podría impresionarlo. Viajes y turismo

    Instalemos y usemos un selector de fechas en nuestra aplicación Ember. Mi seleccionador de fechas preferido es Pikaday . Afortunadamente, varias personas ya han integrado esta biblioteca con Ember CLI. Aquí usaremos el ember-pikadaycomplemento.

    ember install ember-pikaday

    Ahora, creemos un archivo en app/templates/index.hbsy probémoslo.

    {{pikaday-input value=date format='MM/DD/YYYY'}}pYou picked: {{date}}/p

    Este complemento instaló Pikaday y Moment.js , proporcionó un componente Ember llamado {{pikaday-input}}e incluyó el CSS de Pikaday en nuestra compilación, todo con un solo comando de instalación.

    Pruebas

    Integrar el código de su aplicación, un marco de prueba y un ejecutor de pruebas puede ser un desafío. Querrá ejecutar pruebas unitarias en partes aisladas del código y pruebas integradas en la aplicación en ejecución. También querrá ejecutar pruebas desde la línea de comandos para realizar pruebas de integración continua en un servidor de compilación.

    Escribamos una prueba para la página de publicaciones que hicimos anteriormente. Comenzaremos generando una prueba de aceptación llamada "publicaciones".

    ember g acceptance-test posts

    Ahora puedes visitarlo https://localhost:4200/testspara ver la prueba en ejecución.

    ¿Ya tenemos 16 pruebas? Así es. Cada uno de nuestros generadores anteriores creó una prueba para ayudarnos a comenzar, y cada uno de nuestros archivos fue probado con JSHint para detectar errores.

    Completemos la prueba de aceptación generada con algo que nos diga que todas nuestras publicaciones están procesadas.

     

    test('visiting /posts', function(assert) { visit('/posts'); andThen(function() { var titles = find('h3').toArray().map((el) = el.textContent); assert.deepEqual(titles, ['First Post', 'Second Post'], "Has both titles"); });});

    Esta prueba inicia nuestra aplicación Ember en una parte aislada del ejecutor de pruebas, visita la ruta de las publicaciones y luego afirma que el título de cada publicación está en la página. El andThenasistente espera a que se detenga el procesamiento asincrónico antes de realizar afirmaciones.

    Si no eres un ávido probador, es posible que te quedes sin excusas con Ember CLI. Si le entusiasman las pruebas, le resultará más fácil que nunca empezar. Los planos ponen a su alcance las mejores prácticas actuales, para que no tenga que perder tiempo buscando en Google "cómo probar [x] en Ember".

    Ir a producción

    Antes de enviar el código a producción, querrá optimizar la velocidad, minimizar el código, tomar huellas digitales de sus activos y vincular esos activos con huellas digitales en el index.htmlarchivo.

    Puede lograr todo eso con un solo comando, que coloca sus archivos listos para producción en el /distdirectorio.

    ember build --environment="production"

    Una vez que sus activos estén creados para producción, el siguiente paso es implementarlos en un servidor remoto. Muchos usuarios de Ember CLI optan por integrar estos archivos de compilación con el mismo proceso de implementación que utilizan para el código del servidor back-end. Sin embargo, una mejor práctica emergente, refinada y defendida por Luke Melia , es utilizar un flujo de trabajo de implementación front-end separado que permita que su aplicación Ember se implemente independientemente del código de su servidor.

    En EmberConf 2015, Luke anunció que los mantenedores de complementos destacados para implementación habían unido fuerzas para crear un complemento con el nombre Ember CLI Deploy. El equipo recién formado lanzó su primer esfuerzo conjunto, la versión 0.5.0 del complemento.

    Ember CLI Deploy adopta una arquitectura de “núcleo y complementos” . El complemento proporciona el flujo de trabajo de implementación, pero los usuarios instalan diferentes complementos según la infraestructura exacta que utilizan. Por ejemplo, una configuración propuesta por Luke utiliza el servicio S3 de Amazon para alojar archivos y Redis para almacenar y vincular el index.htmlarchivo de la aplicación Ember.

    Puede instalar el complemento actual usando el mismo comando de instalación que vimos antes:

    ember install ember-cli-deploy

    También instalaremos ember–cli–build para crear nuestra aplicación para producción.

    ember install ember-cli-build

    Desde allí, puede instalar el complemento del adaptador de activos que necesita:

    ember install ember-cli-deploy-s3

    Luego, necesitarás instalar un complemento de adaptador de índice, que proporciona una forma de vincular tu index.htmlarchivo al servidor:

    ember install ember-cli-deploy-redis

    Finalmente, puede editar su config/deploy.jsarchivo para incluir información sobre Redis y S3, de modo que Ember CLI Deploy pueda interactuar con estos servicios.

     

    Con esos adaptadores instalados y configurados, puede implementar con un solo comando.

    ember deploy production --activate

    Este comando:

    • construir sus activos para la producción,
    • cargue sus activos de JavaScript y CSS en S3,
    • sube tu index.htmlarchivo a Redis,
    • “activar” el último index.htmlarchivo que se subió.

    En esta secuencia de eventos, solo el último paso, la activación, cambia la versión de la aplicación Ember que se ofrece a los usuarios. Las versiones anteriores de index.htmlse almacenan en Redis y las versiones anteriores de sus activos se almacenan en S3. Para cambiar la versión de la aplicación Ember en ejecución, los desarrolladores usan el activatecomando para indicarle a su servidor que use un index.htmlarchivo en particular que apunte a un único conjunto de activos almacenados en S3.

    ember deploy:activate production --revision 44f2f92

    Para obtener más información sobre cómo puede implementar una aplicación Ember con su infraestructura, consulte la documentación de ember–cli–deploy.

    No sólo para las brasas

    Toda esa charla sobre la eliminación de opciones triviales puede haberle dejado con la impresión de que Ember CLI no es flexible ni configurable. Debido a que Ember CLI necesita adaptarse a una amplia gama de casos de uso de la comunidad, tiene una interfaz pública bien definida para la personalización. De hecho, a pesar del nombre, Ember no es un requisito para Ember CLI. Por ejemplo, el equipo de Firefox OS utilizó Ember CLI con un complemento que creó , en lugar de crear su propia herramienta de compilación.

    Suponga que desea todas las maravillosas funciones de Ember CLI sin Ember. Nuevamente, puedes seguirlo en el repositorio de GitHub adjunto si lo deseas. Comenzaremos con una nueva aplicación Ember CLI:

    ember new no-ember

    A continuación, nos desharemos de Ember para que no esté en nuestra compilación de JavaScript. Eliminaremos Ember y Ember Data del bower.jsonarchivo.

    // In bower.json{ … "dependencies": { "ember": "2.2.0", // Delete … "ember-data": "^2.2.1", // Delete … }, "resolutions": { "ember": "2.2.0" // Delete }}

    También necesitamos eliminar Ember Data del package.jsonarchivo.

    // In package.json{ … "devDependencies": { … "ember-data": "^2.2.1", // Delete … }}

    A continuación, eliminemos la mayoría de las cosas en el directorio de nuestra aplicación. Para tener una aplicación que funcione, solo necesitamos styles, app.jsy index.html.

    app/├── app.js├── index.html└── styles

    Ember CLI espera que exportemos un objeto app.jsque tenga un createmétodo que refleje la interfaz en un archivo Ember.Application. Reemplacemos el contenido predeterminado de ese archivo con un simple objeto exportado.

    export default { create() { }};

    Finalmente, creemos un módulo ECMAScript 6 que represente algo en nuestra aplicación.

    En app/modules/render-something.js, exportaremos una función que representa algún contenido.

    export default function renderSomething() { document.write("Who needs a framework?");}

    Puedes colocar los módulos donde quieras en el appdirectorio. Utilizará la misma ruta al importar desde el espacio de nombres de su aplicación. Así es como podemos importar y usar ese módulo en nuestro app.jsarchivo:

    import renderSomething from 'no-ember/modules/render-something';export default { create() { renderSomething(); }};

    Ahora puede ver su aplicación web ejecutándose en https://localhost:4200.

    El futuro de Ember CLI

    Sin lugar a dudas, Ember CLI llegó para quedarse. Aunque la comunidad Ember fue la primera de las comunidades modernas de marcos front-end en tomar herramientas de construcción en sus propias manos, otras han comenzado a seguir el ejemplo. AngularJS 2.0 tiene su propia herramienta CLI, angular–cli , que es un complemento CLI de Ember. Debido a que React tiene un alcance más limitado que AngularJS 2.0 o Ember, no se planea una herramienta de compilación oficial, pero es de esperar que surja algo prometedor de su ecosistema actual de herramientas .

    Si ha estado esperando para probar Ember, ¿por qué no comenzar hoy con Ember CLI? Todo lo que necesitas para empezar es esto:

    npm install -g ember-cliember new my-first-ember-project

    Referencias

    • Ember CLI La documentación oficial
    • “ Creación de aplicaciones personalizadas con Ember CLI ” (vídeo), Brittany Storoz, EmberConf 2015 Storoz habla sobre el uso de Ember CLI en Mozilla.
    • “ Keynote: ¡10 años! ” (vídeo), Yehuda Katz, RailsConf 2015 Katz explica por qué las elecciones pueden ser perjudiciales.

    Otras lecturas

    • “ Reaccionar ante el futuro con aplicaciones isomórficas ”, Jonathan Creamer
    • “ Una introducción a JavaScript Full-Stack ”, Alejandro Hernández
    • “ Viaje a través de la jungla JavaScript MVC ”, Addy Osmani
    • “ Componentes con estilo: aplicación de las mejores prácticas en sistemas basados ​​en componentes ”, Max Stoiber

    (rb, ml, al, nl, mrn)Explora más en

    • Codificación
    • javascript
    • Marcos





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Escriba su próxima aplicación web con Ember CLI

    Escriba su próxima aplicación web con Ember CLI

    Clase magistral de CSS moderno avanzado, con Manuel Matuzović Implemente rápidamente. Implementar inteligentemente Índice

    programar

    es

    https://pseint.es/static/images/programar-escriba-su-proxima-aplicacion-web-con-ember-cli-880-0.jpg

    2024-04-04

     

    Escriba su próxima aplicación web con Ember CLI
    Escriba su próxima aplicación web con Ember CLI

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20