introducción a herramientas de roots (josé debuchy, wcba 2017)

WCBA17

José María DebuchyIntroducción a herramientas de Roots@josedebuchy

2

WordPress Introducción

๏ Abarca el ~59.2% de los CMS alrededor del mundo. ~28.3% de los sitios web online.

๏ Tiene barreras de entrada muy bajas.

๏ Está basado en una amplia comunidad, en permanente evolución.

3

¿Por qué elegir Roots? Introducción

๏ Proceso de trabajo predecible y escalable en equipo.

๏ Herramientas avanzadas de desarrollo.

๏ Mejora continua en comunidad.

4

Productos de Roots Introducción

Trellis: Infraestructura

Bedrock: Aplicación

Sage: Starter Theme

Nota: Pueden utilizarse en forma separada, pero su ventaja radica en su uso combinado.

5

Requerimientos Introducción

๏ No utilizar servidores compartidos. Instalación Ubuntu 16.04 Xenial TLS.

๏ Ciertas adaptaciones para Windows.

๏ Algunos conocimientos de línea de comandos.

6

Resumen

1. Servidores Idénticos

2. Creación de servidores complejos

3. FTP vs VCS

4. Plugins, Themes y core de WP como dependencias

5. Nueva organización de carpetas

6. Seguridad y mayor organización de constantes

7. Wrapper único. DRY.

8. Utilización de SCSS y compiladores para Assets

9. Sincronización de BBDD mediante plugin

10. Notificaciones, Emails a través de una aplicación de terceros.*

Propuestas de mejora

7

1. Servidores idénticos Trellis

๏ Development, Staging y Producción

๏ Nos aseguramos de que lo que estamos viendo en nuestra computadora mientras desarrollamos se verá en forma idéntica en los otros entornos.

8

2. Creación de servidores complejos Trellis

Servidor LEMP

Opciones: Digital Ocean, Amazon, Vultr

ansible-playbook server.yml -e env=<environment>

9

3. FTP vs VCS + Deploy Automático Trellis

๏ Backup del código. Evolución del código. Posibilidad más sencilla de compartir el trabajo en equipo.

๏ Con un solo comando en ansible se corren una serie de tareas y testeos, si están ok se hace un clon del repositorio, se crea una carpeta con ese codebase con una fecha y se genera una alias como carpeta principal.

๏ Opciones de hosting de repositorios: Github, Bitbucket, Beanstalk.

./bin/deploy.sh <environment> <site name>

10

4. Sistema de dependencias. Bedrock

๏ Todas las dependencias (Plugins, themes y WP) están listadas en un único archivo, llamado composer.json.

๏ Se actualizan desde un único lugar.

๏ Solamente instalás los archivos propios de tu proyecto/theme en el repositorio.

๏ WPackagist. Repositorio composer para WordPress.

composer update

11

Bedrock5. Nueva estructura de carpetas.

composer create-project roots/bedrock your-project-folder-name

12

6. Seguridad Bedrock

๏ La mayoría de las credenciales de acceso o datos importantes se recopilan en archivos .env.

๏ Estos archivos se encuentran fuera la raíz.

๏ wp-password-bcrypt

13

Sage7. Wrapper (DRY)

๏ DRY: Don’t Repeat Yourself.

๏ Se nombra en un archivo base por única vez a las funciones get_header(), get_footer() y get_sidebar().

14

8. SCSS y compiladores de assets Sage

๏ Workflow avanzado

๏ Sage 8: Gulp, Bower, NPM, BrowserSync, etc.

๏ Sage 9: Webpack, Blade, Yarn, BrowserSync, etc

๏ Opciones de Frameworks Bootstrap 4 / Foundation

gulp [watch | —production]bower installnpm install

Sage 8

yarn run [start | build ]yarncomposer install

Sage 9

15

9. Sincronización de BBDD Extra

WP DB Migrate PRO

๏ Ventajas

๏ Ahorro grande de tiempo en migraciones.

๏ Automatización de trabajo. No más manejo de SQL.

๏ Desventajas

๏ Precio

*

16

10. Notificaciones, Emails Extras

๏ Development

๏ MailHog

๏ Staging/Producción

๏ Instalación de servicios externos.

๏ Mailgun, Sendgrid o Amazon SES, entre otros.

*

17

Resumen

1. Servidores Idénticos

2. Creación de servidores complejos

3. FTP vs VCS

4. Plugins, Themes y core de WP como dependencias

5. Nueva organización de carpetas

6. Seguridad y mayor organización de constantes

7. Wrapper único. DRY.

8. Utilización de SCSS y compiladores para Assets

9. Sincronización de BBDD mediante plugin

10. Notificaciones, Emails a través de una aplicación de terceros.*

Propuestas de mejora

18

Combinaciones Sugeridas Resumen

๏ Trellis (Servidor)

๏ Bedrock (Aplicación)

๏ Sage (Theme)

๏ Digital Ocean (Infraestructura)

๏ Bitbucket (Repositorio)

๏ Soil (Limpieza) *

๏ ACF Pro (Campos personalizados) *

๏ WP Migrate DB Pro * (Migración distintos entornos)

๏ Contact Form 7 o Gravity Forms * (Formulario de contacto)

๏ WP Offload S3 Lite (Multimedia)

๏ Font Awesome (Íconos)

๏ Mailgun (Envío de emails)

19

Ejemplo / Soporte Resumen

Roots Example Project

๏ https://github.com/roots/roots-example-project.com

Foro Oficial

๏ https://discourse.roots.io

20

Referencias Resumen

๏Roots (roots.io)

๏Git (git-scm.com)

๏The Twelve-Factor App (12factor.net/es/)

๏Virtualbox (www.virtualbox.org)

๏Ansible (www.ansible.com)

๏SequelPro (www.sequelpro.com)

๏Bitbucket (bitbucket.org)

๏Digital Ocean (www.digitalocean.com)

๏Sass (http://sass-lang.com/)

José Debuchy jdebuchy@40q.com.ar

@josedebuchy

Preguntas