Descripción de tecnologías de desarrollow web modernas que puedes empezar a usar en Joomla! desde mañana

1. Uso de tecnologías modernas en
Joomla!

2. http://www.slideshare.net/phproberto/uso-de-tecnologas-modernas-en-jooml
a

3. Sobre mi
● Programador PHP / Javascript.
● Programando desde 2011.
● Adicto al Opensource.
● #26 contribuidor a Joomla!
@phproberto | https://www.phproberto.com

4. ¿Por qué usar tecnologías modernas?
● Evolución personal. Evolución de tus trabajadores. Evolución de tu negocio.
● Independencia de la plataforma.
● Vida media de una empresa es de 10 años. La mitad no llega a los 5 años.
● Reducir tiempo de desarrollo.
● Fiabilidad.
● Seguridad.
● Marketing.

5. Ten en cuenta
● No todas las nuevas tecnologías son buenas.
● Conoce tu mercado. Pregunta a tus usuarios.
● Reserva tiempo para I+D.
● Analiza la evolución antes de usar una tecnología.
● Introduce cambios paulatinamente.
● Asigna prioridades para su implementación. Fases.

6. Prepara tu Joomla!
● Siempre versión 3.x.
● Buenas tecnologías requieren un buen hosting.
● Comprueba las dependencias de tus extensiones.
● Usa siempre un buen entorno de desarrollo local.
https://www.joomla.org

7. PHP
http://php.net/supported-versions.php

8. ¿Qué versión de PHP elegir?
● Joomla requiere PHP 5.3.10. No traits no party :(
● Versión más común PHP 5.5 / 5.6
● Joomla! bajo PHP 7 es un 62% más rápido.
● Extensiones comerciales: PHP 5.5 / 5.6
● Desarrollos a medida: PHP 7.
http://php.net

9. Composer
● Gestor de dependencias para librerías PHP.
● Es un estándar de facto.
● Perfectamente integrable con Git.
● Librerías explorables a traves de Packagist ( https://packagist.org )
● Distribuye tus librerías para cualquier sistema.
https://getcomposer.org

10. Composer
¿Difícil de integrar?
https://getcomposer.org

11. PHP Namespaces
● Requiere PHP 5.3
● Evitar conflictos con nombres de clases.
● Agrupar grupos de clases por nombre.
● Integrado en composer.
● Perfecta integración con Github.
● Modularización.
http://php.net/manual/es/language.namespaces.php

12. PHP Namespaces: Ejemplo
http://php.net/manual/es/language.namespaces.php

13. PHP Traits
● Requiere PHP 5.4.
● Rompe la herencia vertical de clases.
● Modularización.
● Perfecto para combinar con Joomla.
● No sustituye la herencia tradicional de clases.
http://php.net/manual/es/language.oop5.traits.php

14. PHP Traits: Ejemplo de herencia vertical
http://php.net/manual/es/language.oop5.traits.php

15. PHP Traits: Ejemplo de trait
http://php.net/manual/es/language.oop5.traits.php

16. MySQL
https://www.mysql.com

17. ¿Qué versión de MySQL elegir?
● Joomla requiere MySQL +5.1.
● Versión más común MySQL 5.5 /5.6
● MySQL 5.7 es 200% más rápido.
● Extensión comercial: MySQL 5.5
● Desarrollos a medida: MySQL 5.7
https://www.mysql.com

18. Git
● Control de versiones.
● CASI imposible perder algo.
● Changelog casi automático.
● Búsqueda en el historial.
● No es una opción, es un requisito.
● Puedes empezar con una interfaz: GitKraken, Tower, Github...
https://git-scm.com

19. Tests / CI
● Tus usuarios no son ratas de laboratorio.
● Pruebas unitarias:
○ PHPUnit.
● Pruebas de aceptación.
○ Selenium, Codeception, Behat, etc.
● Travis CI, Jenkins, Gitlab CI, etc.

20. Tests / CI

21. Sass
● Preprocesador CSS.
● Variables personalizables.
● Funciones (mixins).
● Modulariza tus estilos.
● Reusabilidad.
● Define media queries dentro de cada elemento.
http://sass-lang.com

22. Sass: Ejemplo
https://github.com/nternetinspired/embrace

23. Bower
● Gestor de dependencias de assets (css, javascript).
● No depende de otras tecnologías.
● No soporta dependencias anidadas.
● Está siendo reemplazado por npm.
● Fácilmente reemplazable en cuestión de minutos.
http://bower.io

24. Node.js
● Pequeñas librerías javascript que pueden conectarse entre sí.
● Multiplataforma.
● Gestor de assets ( npm ).
● Perfecta integración con Git.
● En Joomla principalmente para sistemas de build y assets.
https://nodejs.org

25. Grunt / Gulp
● Sistemas de build basados en Node.js
● Usos más comunes:
○ Compilar javascript y minimizar archivo resultante.
○ Compilar Sass / LESS y minimizar CSS resultante..
○ Actualizar sitio de prueba con cambios en idiomas, php, etc.
○ BrowserSync ver cambios en tiempo real.
○ Crear zip para empaquetar tus extensiojnes (releases).
http://gulpjs.com | http://gruntjs.com

26. SVG
● Archivos pequeños con buena compresión.
● Manipulables a través de CSS y Javascript.
● Se adaptan bien a cualquier resolución.
● Iconos perfectos.
● Funcionan en cualquier navegador salvo IE8 / Android 2.3.
● Se pueden incrustar sin requests adicionales.
http://www.w3schools.com/svg

27. Tú eres la tecnología
más importante.
NUNCA dejes de actualizarte.