Joel Humberto Gomez Paredes
Frontend Developer at Platzi, Google Developer Expert
Frontend Developer en Platzi, Google Developer Expert
Juan Díaz Covarrubias, Mexico
Actions
Frontend Developer at Platzi, FullStack JS Developerk, GDE on Web Technologies and Google Maps Platform. Pokemon master, corgi fan and taco lover
Frontend Developer en Platzi, FullStack JS Developerk, GDE en Web Technologies y Google Maps Platform. Maestro Pokemon, fan de los corgis y amante de los tacos
Area of Expertise
Topics
El arte de construir/distribuir una biblioteca JS
Crear software ya sea en una compañía o por tu cuenta es un desafío, ¿que formatos vas usar? ¿quién lo puede usar? ¿hasta donde puedo dar soporte? ¿bundled o unbundled?. En esta charla vamos a hablar sobre consideraciones técnicas de como distribuir bibliotecas JS en distintos ecosistemas (npm, tu propio artifactory, unpkg), testing e2e de bibliotecas y configuraciones de nuestro package.json para el manejo de dependencias (dependencies, peerDependencies), bundlers, tree-shaking, micro-libraries, monorepos, polyrepos, herramientas. Además de un demo haciendo el deployment de una biblioteca mostrando el development workflow
Edge Side Includes and React
Edge Computing is a game changer in how we build software on web. Edge Side Includes is a way to distribute applications and components, but what are the challenges you need to face when you are using React? This talk is about to create a micro components architecture using cloudflare to distribute components on your products facing: testing, components scalability and runtime problems
Edge Computing para distribuir components === Cloudflare + Edge Side Includes
En frontend hacemos deliveries usando bundlers que hacen uso de paquetes npm, pero en algunos casos esto no es suficiente cuando necesitamos delivery sin la necesidad de hacer deployments en cada aplicación. El enfoque de microfrontend resuelve esto, a nivel implementación podemos usar el poder de Edge Computing y Edge Side Include para definir fragmentos de nuestra aplicación (estilo Island Architecture) que serán reemplazados por componentes funcionales antes de llegar al cliente. Permitiendo que la aplicación pueda adaptarse a los clientes sin sacrificar velocidad tanto en distribución como en ejecución. En esta charla usaremos cloudflare y React para hacer una pequeña implementación y conocer el potencial del Edge Computing
Arquitectura Frontend: Multi-Formatos en Acción
Charla donde se explora como componentes pueden ser exportados a diferentes formatos para su consumo por aplicaciones usando: ES, ESM, RequireJS, CommonJS, Module Federation, Edge Side Includes, HTML Puro, etc.
Consideraciones a tomar en cuenta al elegir un stack de desarrollo y distribución de código, si es conveniente crear bibliotecas que engloben todos los componentes de un sistema de diseño o liberar un paquete por componente de tu sistema de diseño, o un approach híbrido.
Haremos una demo donde observaremos el pipeline para exportar a multiples formatos y como la demo se actualiza sin la necesidad de hacer un release de nuestra aplicación y solo del componente
Why Frontends must learn AST?
Tools like babel and eslint works based on plugin architecture, under the hood they use ASTs to explore the program and make correcctions or transformations. Also adventages using this approach instead of Regular Explressions
We explore how a program is translated to AST using AST Explorer, the different parsers to create AST what tools use them and how works Visitor Pattern to make modifications on the source code
For demo I make a eslint plugin with rules to avoid import "dangerous packages"
Handling Design Tokens With Style-Dictionary
If you have the task to build a design system, the first need to worry about is Desig Tokens and when you have it, the next task is how make distribution. In this workshop we process design tokens to exports to Sass, Javascript, CSS, Kotlin, Swift or a custom format. We explore the source of style dictionary to learn how are build some transformations, use them or create your own.
Frontend Architecture: Patterns to improve performance and maintainability on applications
Esta charla esta orientada a explorar algunos patrones de arquitectura (SPA, MicroFrontends, ModuleFederation, Edge Side Includes) cuando seleccionar uno u otro, ventajas y desventajas. Veremos algunos casos de uso donde se aplican podemos hacer uso de patrones de renderizado, performance y de diseño, que pueden ayudarnos a mejorar el score (core web vitals) de nuestras aplicaciones y como hacer código mantenible y flexible
¿Porqué un Frontend debería aprender a usar ASTs?
Vamos a hablar sobre Abstract Syntaxt Tree y herramientas que lo usan como babel y eslint, entre otras herramientas basadas en plugins.
Analizaremos la estructura de un programa en ASTs, como se exploran y modifican los nodos usando el Visitor Pattern, ademas de los diferentes parsers que hay.
Exploraremos como podemos usar jscodeshift para modificar código usando AST's
Frontend Patterns: Improve architecture, maintainability and performance
¿Multi Page Apps? ¿Single Page Apps? ¿Micro-Frontends? ¿Islands? ¿CSR vs SSR vs SSG? We are going to talk about this concepts where use: CSR or SSR or SSG, the pros and cons of every pattern, how impact on performance, costs, maintainability , etc. We are going to explore tools like next, Astro and Qwik to create sites/apps, patterns like tree-shaking, code-spliting, import on visibility and progressive web apps.
A gentle introduction to Service Workers and Workbox
Service workers brings great power to our applications to get to user better experiences like offline capabilities, push notifications and background sync but can be a little hard to understand and create complex ones. Fortunetly exists workbox a tool who help us to create service workers easily and faster
Creating components to run on every framework using Web Components
When you are creating a Components Library or Design System, you need to made it easy to use for everyone, you need to made implementations on React, Vue, or X framework JS recently created. We will talk about how Web Components is the key to reuse code and made easier the development using the web platform. Also we talk about other useful tools and alternatives like Mitosis to write once and run everywhere
The art to build JS Library, tips to avoid problems
Create software to distribute inside your company is a challenge, from define dependencies to e2e testing. This talk has the goal to explore approches when you need to consider targets, package.json configuration (dependencies, peerDependencies), bundlers, tree-shaking, micro-libraries, monorepos, polyrepos, deployment tools, testing and distribution platforms. We gonna make a deploy of a library and follow the development workflow
Improving your Frontend Skills with Architecture and Design Patterns
To reach the next level as Frontend developer you need to understand how are build the tools we use everyday.Webpack, Rollup, Vite, Babel, ESLint, Semantic Release, etc. All those software make use of architecture and design patterns to adapt themself to solve problem on thousands on projects across the world. We are gonna to explore plugin architecture and patterns like: Visitor, Memoization, Chain of responsability andf Strategy
Improving your JS Code in your startup
Startups are chaotic and the code is not different, tech debt and monter deadlines always be present and growing. To survive in this adventure we need to have control about the code, set conventions and more important tools to be sure the rules are applied, integrate them with our pipeline, create internal tools, use software portals, scaffoldings, documentation, etc. In this talk we explore how use artifactories, plugins, linters and backstage to manage and track your software
Administrando Design Tokens usando Style Dictionary
Los Design Tokens son la base para construir un Design System. Definirlos es complicado pero eso es solo el principio, después necesitamos definir métodos de contribución y distribución.
Este workshop vamos a trabajar en como usar style-dictionary para procesar Design Tokens y exportalos a formatos como sass, JS, CSS, Kotlin, Swift, etc.
También aprenderemos como hacer transformaciones y usarlas para crear nuestros propios formatos
Joel Humberto Gomez Paredes
Frontend Developer at Platzi, Google Developer Expert
Juan Díaz Covarrubias, Mexico
Actions
Please note that Sessionize is not responsible for the accuracy or validity of the data provided by speakers. If you suspect this profile to be fake or spam, please let us know.
Jump to top