Name: React Day Berlin 2023
Start: 2023-12-08T12:00:00.000Z
End: 2023-12-12T20:00:00.000Z

Acompáñame en mi viaje de creación del Sistema de Plugins al estilo WordPress para Next.js, un experimento que mejora las aplicaciones de Next.js permitiendo la fácil instalación y personalización de plugins para características como Google Analytics, Inicio de sesión social y Comercio electrónico. Mostraré las características únicas del sistema de plugins basado en archivos, como el almacenamiento persistente por plugin, el registro de componentes, rutas y funciones, y un sistema de eventos entre plugins. La charla también comparte la historia de cómo y por qué resolví este problema para facilitar la vida de los desarrolladores. Echa un vistazo al experimento en <a target="_blank" href="https://github.com/gluestack/next-wordpress-plugins.">https://github.com/gluestack/next-wordpress-plugins.</a>

Plugins al estilo WordPress, pero para Next.js

This Talk discusses the implementation of a plugin system for Next.js, similar to Wordpress. The plugin system allows for the co-location of different functionalities within their own modules. Plugins can be easily added or removed without affecting other parts of the website. The Talk also showcases a demo of the plugin system in action. The key takeaways include the benefits of co-locating features, the importance of code abstraction beyond packages, and the future of copy-pasting as a means of code reuse.

Join me on my journey of creating the Next.js WordPress-like Plugin System, an experiment that enhances Next.js applications by allowing easy installation and customization of plugins for features like Google Analytics, Social Login, and E-commerce. I'll showcase the unique features of the file-based plugin system, such as persistent storage per plugin, registration of components, routes, and functions, and a cross-plugin event system. The talk also shares the story of how and why I solved this problem to make developers' lives easier. Check out the experiment at <a target="_blank" href="https://github.com/gluestack/next-wordpress-plugins.">https://github.com/gluestack/next-wordpress-plugins.</a>

WordPress-like Plugins, but for Next.js

Sanket Sahu

Even though his bio offers quite a hefty reading, he only applied for one job in his career. The rest came along as he was building his name as a renowned speaker, teacher, and a prolific figure of the open-source community. How did Kent do it? “Commit to creating high-quality content,” he says. What led you to programming?I had a friend when I was a teenager who was really into it, and he tried to teach me. But I just couldn't get it — it didn't make any sense to me. So I never really thought I'd get into programming, but I liked computers a lot, and I ended up going to school for electrical engineering.  Well, that didn't work because I'm not good at math. But right when I started the program, I got a job at a company uploading videos to YouTube and that sort of thing. The work was tedious, so I decided to write a computer program to automate lots of the work I was doing with the knowledge I had about programming. And that was the first spark of things for me to use programming to solve real-world problems.  What is the most impactful thing you ever did to boost your career? Committing to creating high-quality content. That might sound obvious because I'm a full-time educator now, but I would not have gotten my job at PayPal if I hadn't been so active with my blog. In fact, lots of my jobs came out of me being involved in the community around meetups, conferences, or open-source projects.  How do you choose topics for the content you create, be it for your blog or podcast?I don't think too much about the content other people are creating. And I don't often consume it. My ideas come from the things that I'm working on, things that I'm learning myself, or — when I was working with a team of developers — the things that I had to remind people of in code reviews regularly. Anytime that I would have a code review comment that was pretty long to describe my position, that was an excellent opportunity for a blog post. Also, if people ask me about a topic regularly, I'll make a blog post rather than answer that question multiple times. What would be your three tips for engineers to level up their career? The number one thing I tell people is to be a nice person. I know that sounds fluffy or silly, but it cannot be overstated. You will get so much further in your career and just in life in general if you're a nice person. That doesn't mean that you take people being jerks lying down, but how you interact with others is out of kindness. You could be the best engineer in the entire world, but if you're not a nice person, you will not reach your full potential or accomplish your goals, whatever they may be. Second, it's just as important to decide what you are not going to learn as it is to decide what you are going to learn. You could jump into countless things — and there are successful people who are polyglot programmers, but I can't speak to that a whole lot. All I can tell you is that in my experience, focusing on specific things that I want to be truly good at has worked out great for my career. That doesn't mean that I closed myself off to other things. With my <a href="https://kent.dev">website rewrite</a>, I have been doing a lot of dev ops-related work and a lot of back-end stuff that I've typically not been involved in. You want to keep your head up on what's going on outside of what you're doing so that you know what direction to go in when you come across problems you need to solve. However, finding a focus on what you want to be good at has helped me a lot. That way, you feel a little less stressed. And the third one? Learn how to learn effectively. It's a three-step process: you consume, build, and teach. The consumption of newsletters and Twitter and whatever inspires you, but you don't want to spend too much time doing that — implementing it into actually building something matters. This happens naturally if you work at a company, but maybe you're not making the things you want to learn, so you may want to start a side project. The building phase is where you get experience, but you also want to solidify that experience. How? You start teaching. You don't necessarily have to teach it to people, it could be stuffed animals. The goal of the teaching is to retain in your mind what you've learned through the building process. What are you working on right now? The big thing I'm working on right now is a rewrite of my website. It'll be much more than just a developer portfolio — I'll have user accounts, and there'll be fun things that you can do with it. And because it's more than just a website, I'm using <a href="https://remix.run">Remix</a>, a new cool framework in the React ecosystem. I'm also working on updating my material on <a href="https://testingjavascript.com">TestingJavaScript.com</a> and a TypeScript course as well.  So, whatever I'm working on, it ends up resulting in lots of opportunities for content. Do you have some rituals that keep you focused and goal-oriented? I have a notepad where I keep all of my notes of what I'm going to do for the day so that when I'm checking things off, I'm not distracted notifications. I've tried apps for that, and that does not work well for me.  I also am a firm believer in inbox zero. I have my work inbox and my personal inbox, and I keep them both at zero. And I kind of use that as a to-do list.  And if I'm not feeling excited about working for some reason, I will often hop on my Onewheel, which is an electric skateboard that only has one giant wheel in the middle. It's just a total blast, and I'll hop on that with my backpack and a charger, and I'll go to a Starbucks or a park just to declutter my mind. What things in the React universe are you excited about right now?React version 18 is coming out soon. The experimental version is out there, and it's fun to play with. I'm just really thrilled that it's no longer a concurrent mode but concurrent features that you can opt into. Cool things like that will enable React server components in the future.  But the biggest thing I'm excited about is Remix. That's huge. It eliminates a lot of problems that are solved well other tools, but when I'm using Remix, I don't have those problems, so I don't need those clusters. You already said that teaching is an integral part of the learning process, and you stand your word since you're also a full-time educator. What inspired you to enter this field?I have been a teacher for as long as I can remember. I grew up in a church where you talk in front of your peers from a very young age, and my mom was an elementary school teacher, so teaching has just always been a part of me.  I really just enjoy sharing what I'm learning with others. As far as teaching technical topics, I gave my first workshop when I was still a student at Brigham Young University. With my fellow, we taught how to use AngularJS, and I got Firebase to sponsor pizza so they would show up, and that was pretty fun. Then I started teaching on the side at <a href="https://egghead.io/instructors/kentcdodds?af=5236ad">egghead.io</a> right after I'd graduated. That was when I first got a paycheck for teaching. And I realized that teaching could be quite lucrative and support my family and me as a full-time endeavor. So I did it — I quit my job. I'm a very risk-averse person, so I'd done teaching as a side hustle for four years just to verify that I could make this work. When TestingJavaScript was released, and I got that paycheck, I realized that I didn't need my PayPal salary anymore. I could just focus my daytime on teaching and give my evenings back to my family, which was a nice trait. Apart from that, how has teaching impacted your career? Earlier I mentioned that pretty much all of my jobs came because I was perceived as an expert. After the first job, where I was an intern and then converted into full-time, I never applied to another. I worked for four different companies, and they wouldn't have recruited me if they didn't know who I was and what I was doing. My content is how they knew who I was — I just made it easy for them to find me. Teaching made that impact. It made my career.  We talked about React and Remix. Are there any other open-source projects that you'd recommend keeping an eye on or contributing to?I have some myself. React Testing Library is probably the biggest one that people are familiar with. And if React isn't your jam, then other framework versions of the testing library.  React Query is also really popular. If you're using Remix, you don't need it, but if you're not, I strongly advise using React Query cause it's a stellar, fantastic library, and Tanner Linsley, the creator, is a stellar and fantastic person.  What pieces of your work are you most proud of? Probably the biggest thing I've ever done is <a href="https://epicreact.dev/">EpicReact.Dev</a>. It has helped tens of thousands of people get really good at React, improve their careers and make the world a better place with the skills that they develop. My whole mission is to make the world a better place through quality software, and I feel like I've done that best with Epic React.  There are things that I've built at other companies that are still in use, and I'm proud of those cause they've stood the test of time, at least these last few years. But of everything, I think Epic React has made the biggest impact.<a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

Kent C. Dodds: Consume, build, and teach — and level up your career

Kent C. Dodds

Software engineer, lecturer, podcast host, author — is there something Emma Bostian hasn't done? She moved from America to Sweden, started working at Spotify, and took up a few challenges along the way. And now she has some career tips to share. What led you to software engineering? I was raised in the ecosphere of tech because my dad is a software engineer at IBM, and my mom was a designer there, too. My dad always encouraged me to join STEM and take a look at computer science — however, I was convinced I wanted to be a medical doctor. In my first year of college, I declared a biology major and quickly realized I was not too fond of it. In my second semester, I switched to an actuarial science major where I took Introduction to Computer Science, and the rest is history. In my second year of college, I declared a computer science major and began my journey from there. What is the most impactful thing you ever did to boost your career?Writing blog posts and documenting my learning journey on <a href="https://twitter.com/EmmaBostian">Twitter</a> has far been the best career boost. I wrote purely for myself to reference the things I learned over time, and I even utilized my design skills in Figma to create custom graphics depicting difficult concepts like CSS specificity. By sharing my blogs on Twitter and engaging with the people reading them, I was able to grow an audience extremely quickly. I began receiving conference speaking opportunities, podcast requests, and course invitations to teach with <a href="https://www.linkedin.com/learning/instructors/emma-bostian">LinkedIn Learning</a> and <a href="https://frontendmasters.com/teachers/emma-bostian/">Frontend Masters</a>. Ultimately, I landed my job at Spotify through Twitter, too, when a friend and follower of mine asked if I would be interested in interviewing. Now I live in Stockholm working my dream job. It still blows my mind how tweeting about my blog led me to some of the most amazing career opportunities. What would be your three tips for engineers to level up their career? First, be patient. I often see posts on Twitter or LinkedIn about developers who were promoted to a senior position after a year. And while this is wonderful, I think we forget that each company has a different standard for what constitutes a senior developer, and everyone's journey will be different. Second, don't be afraid to ask questions. If you try your best to solve a problem or answer a question you have, but you can't figure it out after a reasonable amount of time, ask a team member or mentor for help. And lastly, invest in the right resources for learning. When I started my journey, I didn't know which platforms worked for me to learn. Now, I have a few trusted platforms such as <a href="https://frontendmasters.com/">Frontend Masters</a>, <a href="https://www.freecodecamp.org/">Free Code Camp</a>, or <a href="https://www.leveluptutorials.com/">Level Up Tutorials</a> that I go to when I need to learn a new skill. You're currently working as a software engineer at Spotify. What does a typical day of yours look like there?I begin my day answering emails. Then we have a team breakfast and a standup remotely as we're all still remote at Spotify. After that, we might have a web tech sync with the other squads in our business unit. The day usually includes some form of pair or mob programming, depending on the work stream.  My team always has Fika, a traditional Swedish coffee break, scheduled every afternoon. Every couple of Fridays, we have team games planned to release some stress.  Also, I tend to have a lot of free time to focus, which is nice but makes for a boring answer to this question! Do you have some rituals or tools that keep you focused and goal-oriented?I'll admit that I've been struggling with staying motivated in the time of remote work. I've been remote with Spotify since onboarding a year ago, but my team is wonderful, and they help me when I'm down. Apart from that, I use Todoist to keep track of my tasks, and, naturally, I listen to Spotify while working. But other than that, not really. Maybe I should adopt some new tools to keep me on track! My current favorite Spotify playlist is Brand New Chill: <a href="https://open.spotify.com/playlist/37i9dQZF1DX6uQnoHESB3u?si=380263b3c853442e">https://open.spotify.com/playlist/37i9dQZF1DX6uQnoHESB3u?si=380263b3c853442e</a> I also love Chillout Daily: <a href="https://open.spotify.com/playlist/7ozIozDp260fjNOZy1yzRG?si=66d6c839ec9b458a">https://open.spotify.com/playlist/7ozIozDp260fjNOZy1yzRG?si=66d6c839ec9b458a</a> You wrote a book called <a href="https://technicalinterviews.dev/">De-coding the Technical Interview</a>. What was the impulse to do it?I wanted to give the community a manual of the essentials of computer science knowledge to ace the technical interviews. The book covers data structures like stacks, queues, or linked lists, tackles algorithms, and deals with systems design. You'll also learn about the interview process from start to finish, get tips on how to submit an amazing take-home project, or understand how to problem solve. You'll also gain knowledge on the frontend coding skills needed to excel at a frontend interview. If you could stress one piece of advice on surviving a technical interview, which would it be?Do not lie your way through an interview. If you don't know the answer to something, just admit it. There's no shame in admitting you don't know the answer to something. There is shame in faking it and pretending like you do know the answer. What's the single best practice everyone who writes code should follow?Remember that while you are technically writing code for computers, you're also writing it for humans. Your code should be readable and have as little complexity as possible without sacrificing accessibility or performance. In addition to the book, you co-host the <a href="https://www.ladybug.dev/">Ladybug Podcast</a>. What inspired you to enter this field, and what are the podcast's main topics?We talk about everything tech and career on the podcast, from Java and GraphQL to how to start a business and cross-cultural communication. The podcast is a way for me and my co-hosts to share our experiences in tech, having taken different paths. And I'm really glad for doing it — it has allowed me to meet so many incredible people, learn many new things, and support my dream of teaching. What pieces of your work are you most proud of?My technical interview book was a huge feat for me as well as my courses with LinkedIn Learning on building a tech resume. I enjoy creating things that help other people advance their careers, so I'm also proud of my courses with Frontend Masters on design systems and CSS.

Emma Bostian: I landed my dream job by sharing my blogs on Twitter

Emma Bostian

When it comes to career, Charlie has one trick: to focus. But that doesn’t mean that you shouldn’t try different things — currently a senior front-end developer at <a href="https://www.netlify.com">Netlify</a>, she is also a sought-after speaker, mentor, and a machine learning trailblazer of the JavaScript universe. "Experiment with things, but build expertise in a specific area," she advises. What led you to software engineering?My background is in digital marketing, so I started my career as a project manager in advertising agencies. After a couple of years of doing that, I realized that I wasn't learning and growing as much as I wanted to. I was interested in learning more about building websites, so I quit my job and signed up for an intensive coding boot camp called General Assembly. I absolutely loved it and started my career in tech from there.  What is the most impactful thing you ever did to boost your career?I think it might be <a href="https://charliegerard.dev/speaking">public speaking</a>. Going on stage to share knowledge about things I learned while building my side projects gave me the opportunity to meet a lot of people in the industry, learn a ton from watching other people's talks and, for lack of better words, build a personal brand.  What would be your three tips for engineers to level up their career?Practice your communication skills. I can't stress enough how important it is to be able to explain things in a way anyone can understand, but also communicate in a way that's inclusive and creates an environment where team members feel safe and welcome to contribute ideas, ask questions, and give feedback. In addition, build some expertise in a specific area. I'm a huge fan of learning and experimenting with lots of technologies but as you grow in your career, there comes a time where you need to pick an area to focus on to build more profound knowledge. This could be in a specific language like JavaScript or Python or in a practice like accessibility or web performance. It doesn't mean you shouldn't keep in touch with anything else that's going on in the industry, but it means that you focus on an area you want to have more expertise in. If you could be the "go-to" person for something, what would you want it to be?   And lastly, be intentional about how you spend your time and effort. Saying yes to everything isn't always helpful if it doesn't serve your goals. No matter the job, there are always projects and tasks that will help you reach your goals and some that won't. If you can, try to focus on the tasks that will grow the skills you want to grow or help you get the next job you'd like to have.  What are you working on right now?Recently I've taken a pretty big break from side projects, but the next one I'd like to work on is a prototype of a tool that would allow hands-free coding using gaze detection.   Do you have some rituals that keep you focused and goal-oriented?Usually, when I come up with a side project idea I'm really excited about, that excitement is enough to keep me motivated. That's why I tend to avoid spending time on things I'm not genuinely interested in. Otherwise, breaking down projects into smaller chunks allows me to fit them better in my schedule. I make sure to take enough breaks, so I maintain a certain level of energy and motivation to finish what I have in mind.  You wrote a book called <a href="https://www.apress.com/gp/book/9781484264171">Practical Machine Learning in JavaScript.</a> What got you so excited about the connection between JavaScript and ML?The release of TensorFlow.js opened up the world of ML to frontend devs, and this is what really got me excited. I had machine learning on my list of things I wanted to learn for a few years, but I didn't start looking into it before because I knew I'd have to learn another language as well, like Python, for example. As soon as I realized it was now available in JS, that removed a big barrier and made it a lot more approachable. Considering that you can use JavaScript to build lots of different applications, including augmented reality, virtual reality, and IoT, and combine them with machine learning as well as some fun web APIs felt super exciting to me.  Where do you see the fields going together in the future, near or far? I'd love to see more AI-powered web applications in the future, especially as machine learning models get smaller and more performant. However, it seems like the adoption of ML in JS is still rather low. Considering the amount of content we post online, there could be great opportunities to build tools that assist you in writing blog posts or that can automatically edit podcasts and videos. There are lots of tasks we do that feel cumbersome that could be made a bit easier with the help of machine learning.  You are a frequent conference speaker. You have your own blog and even a newsletter. What made you start with content creation?I realized that I love learning new things because I love teaching. I think that if I kept what I know to myself, it would be pretty boring. If I'm excited about something, I want to share the knowledge I gained, and I'd like other people to feel the same excitement I feel. That's definitely what motivated me to start creating content.  How has content affected your career?I don't track any metrics on my blog or likes and follows on Twitter, so I don't know what created different opportunities. Creating content to share something you built improves the chances of people stumbling upon it and learning more about you and what you like to do, but this is not something that's guaranteed. I think over time, I accumulated enough projects, blog posts, and conference talks that some conferences now invite me, so I don't always apply anymore. I sometimes get invited on podcasts and asked if I want to create video content and things like that. Having a backlog of content helps people better understand who you are and quickly decide if you're the right person for an opportunity.What pieces of your work are you most proud of?It is probably that I've managed to develop a mindset where I set myself hard challenges on my side project, and I'm not scared to fail and push the boundaries of what I think is possible. I don't prefer a particular project, it's more around the creative thinking I've developed over the years that I believe has become a big strength of mine.***<a href="https://twitter.com/devdevcharlie">Follow Charlie on Twitter</a> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Charlie Gerard's Career Advice: Be intentional about how you spend your time and effort

Charlie Gerard

Jan Tomes

La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables. En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza. Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones. - Domina los fundamentos de CMS sin cabeza- Domina un enfoque de Astro &amp; CMS sin cabeza- Usa el diseño atómico en tu aplicación Astro &amp; Storyblok- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza

Curso intensivo sobre Astro y Storyblok

This workshop introduces Astro Storyblok and combines it with the headless CMS, Storyblok. It covers topics such as headless CMS, JAMstack, and the use of atomic design. Participants learn how to set up a Storyblok account, configure the preview URL, and import component schemas. They also explore real-time editing, nested components, and dynamic menus. The workshop concludes with customizing existing components, adding images, and using the Astro image component.

Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications.  In this workshop, we will quickly take a dive into the Headless World and Architecture.  Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory.  - Master headless CMS fundamentals- Master an Astro &amp; headless CMS approach- Use Atomic design in your Astro &amp; Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless

Crash course into Astro and Storyblok

Arisa Fukuzaki

Las contraseñas han sido durante mucho tiempo las llaves de nuestros reinos. Sin embargo, a menudo se convierten en los puntos débiles de nuestra armadura: olvidados, mal utilizados o explotados. Nuestras aplicaciones de Next a menudo hacen uso de contraseñas para autenticar a los usuarios, pero ¿cómo sería un mundo sin contraseñas? ¿Y cómo podemos comenzar a conducir hacia ese futuro hoy?

Autenticación Más Allá de las Contraseñas

This workshop focuses on the future of authentication, specifically passwordless authentication. It explores the challenges with passwords and introduces various passwordless authentication methods such as magic links and WebOfN. The registration and authentication process for passwordless authentication are discussed, along with the use of passkeys for authentication. The workshop also covers the setup of Auth0 and the creation of a Next.js application with Auth0 integration.

Passwords have long been the keys to our kingdoms. However, they often become the weak points in our armor — forgotten, misused, or exploited. Our Next apps often make use of passwords to authenticate users, but what would a world with no passwords look like? And how we can start driving into that future today?

Authentication Beyond Passwords

Juan Cruz Martinez

Cuando se trata como una plataforma, los LLMs como ChatGPT se convierten en poderosos bloques de construcción para agentes conversacionales personalizados. En esta charla, utilizamos la API de OpenAI y el SDK de Vercel AI para construir un sumiller digital que recomienda el vino perfecto.

Construyendo un Sumiller Digital en ChatGPT y la API de OpenAI

Today's Talk introduces the concept of building a digital AI-powered sommelier using the Bracel.ai SDK. The speaker emphasizes the role of developers in shaping the impact of AI, particularly generative AI, on our work. The Talk showcases a simple digital sommelier built using the Resell AI SDK and OpenAI API, highlighting the ease of implementation and the potential of open source tools. The speaker encourages users to explore the possibilities of generative AI responsibly and recommends checking out And Why, a design and technology studio from Munich.

When treated as a platform, LLMs such as ChatGPT become powerful building blocks for custom, conversational agents. In this talk, we use the OpenAI API and Vercel AI SDK to build a digital sommelier that recommends the perfect wine.

Building a Digital Sommelier on Top of ChatGPT and the OpenAI API

Jan Demmerle

<div>Damos un vistazo a diferentes desafíos y decisiones al agrupar código para aplicaciones web. Observamos cómo se resuelven comúnmente estos y por qué necesitamos repensarlos.</div>

Repensando las Estrategias de Agrupación

The talk discusses rethinking bundling strategies, focusing on challenges such as long-term caching and improving the state of Next.js and Webpack. It explores handling immutable caching and content hashes, optimizing asset references and page manifests, and addressing issues with client-side navigation and long-term caching. The talk also covers tree shaking and optimization, optimizing module fragments and code placement, and the usage and relationship of TurboPack with Webpack. Additionally, it touches on customizing configuration and hash risks, barrel imports and code splitting, and entry points and chunking heuristics.

<div>We take a look at different challenges and decisions when bundling code for web applications. We look at how these are commonly solved and why we need to rethink them.</div>

Rethinking Bundling Strategies

Tobias Koppers

Las condiciones de carrera se encuentran entre algunos de los problemas más desafiantes de detectar y reproducir. Como tal, representan un desafío significativo en el desarrollo, notablemente en la interfaz de usuario. En esta charla, exploramos cómo detectar condiciones de carrera aprovechando las técnicas de fuzzing. Te guiamos a través del descubrimiento del verdadero problema de las condiciones de carrera y cómo impactan en la experiencia del usuario. Te proporcionamos herramientas y ejemplos que demuestran cómo detectarlas fácilmente en tu trabajo diario gracias a las pruebas que se basan en el fuzzing. Después de esta charla, esperamos que tu código React esté libre de condiciones de carrera o al menos que tengas las herramientas adecuadas para ayudarte.

Rompe la Carrera: Detección Fácil de Condiciones de Carrera para React

Race conditions can be complex to debug and reproduce, causing frustration for users. The speaker discusses examples of race conditions and ways to fix and avoid them. They demonstrate an example of an auto-completion field in React and how to handle race conditions in API calls. The speaker introduces the FastCheck framework for property-based testing to address race conditions and improve tests. Randomizing inputs and outputs can help uncover bugs specific to certain scenarios. The speaker also discusses mitigating race conditions in React and handling test overhead and reproducibility.

Race conditions are among some of the most challenging to detect and reproduce issues. As such they pose a significant challenge in development notably in UI. In this talk, we explore how to detect race conditions by leveraging fuzzing techniques. We walk you through discovering the real problem of race conditions and how they impact user experience. We provide you tools and examples demonstrating how to easily detect them in your daily work thanks to tests relying on fuzzing. After that talk, we hope your React code will be race conditions free or at least that you will have the right tools to help you.

Break the Race: Easy Race Condition Detection for React

Nicolas Dubien

Astro 3 fue lanzado hace un tiempo y trajo consigo algunas características nuevas increíbles. En esta charla, echaremos un vistazo a algunas de las características recién lanzadas en Astro 3, haremos algo de codificación en vivo y nos divertiremos. Podemos echar un vistazo a lo que vendrá a continuación en Astro 4 y también podría haber 'una cosa más'

Todo Sobre Astro

Astro is a powerful framework for content-driven websites, with its own syntax and the ability to use favorite front-end libraries. It has seen significant improvements in Astro 2 and Astro 3, including view transitions and improved performance. Astro 4 introduces features like a powerful dev toolbar, content caching, and internationalization support. The Astro community is highly regarded, and Astro is being used for production websites. Astro also supports migrating legacy websites and integrating with headless CMSs.

Astro 3 was released a while ago and brought some amazing new features with it. In this talk, we’ll take a look at some of the newly released features in Astro 3, do some live coding and have some fun. We can take a look at what’s coming next in Astro 4 and there also might be a 'one more thing

All Things Astro

Elian Van Cutsem

Nuestra aplicación de interfaz de usuario web es bastante grande: cientos de personas la han estado construyendo activamente durante los últimos ocho años. Comenzamos a enfrentar problemas de escalabilidad y limitaciones tecnológicas. Evaluamos muchas opciones y nos decidimos por los micro-frontends. Esta noche discutiremos:- Diferencias entre varias arquitecturas de micro-frontends- Por qué tomamos esta decisión y si es útil para ti- Lo que ganamos- Lo que sacrificamos (sí, hay desventajas)- Qué desafíos aún tenemos por delante

Desafíos de Descomponer un Front-End Masivo Usando Micro-Frontends

Microfrontends offer a potential solution to frontend engineering problems, improving testing efficiency and allowing for faster development. There are misconceptions about microfrontends, with different approaches such as horizontal and vertical splits. Monorepos are recommended for managing microfrontends. Data management and side effects can be handled through various approaches. Building microfrontends without a monorepo can be challenging, but it depends on the scale of the application. Trust in people and implementing a registry of components help avoid duplication. Tools like Module Federation and NX are useful for managing microfrontends.

Our web UI application is pretty big - hundreds of people have been actively building it during the past eight years. We started facing scalability issues and technological limitations. We evaluated plenty of options and settled on micro-frontends. This evening we will discuss:- Differences between various micro-frontend architectures- Why we made this choice and if it's helpful for you- What we gained- What we sacrificed (yes, there are downsides)- What challenges are still ahead of us

Challenges of Decomposing a Massive Front-End Using Micro-Frontends

Oleksandr Tryshchenko

Los Durable Objects de Cloudflare son un nuevo entorno de ejecución de JavaScript que facilita la construcción de servidores backend con estado, a demanda y en el borde, tan fácil y barato como las funciones sin servidor.Al colocar el cálculo y el estado, los Durable Objects reducen la complejidad a gran escala y te permiten concentrarte en la construcción de tu producto.En esta charla rápida, codificaremos en vivo un backend en tiempo real desde cero, mostraremos cómo funcionan los Durable Objects y exploraremos cómo puedes aplicar esta herramienta versátil a una amplia gama de problemas de ingeniería cotidianos.

Durable Objects - Todo En Todas Partes Todo De Una Vez Por No Mucho Dinero

Durable Objects is a versatile programming paradigm by Cloudflare that allows for stateful and uniquely addressable server environments. It simplifies feature development, enables real-time updates through WebSocket connections, and provides a built-in key-value store for long-term storage. It can be used to create collaborative applications, manage data storage efficiently, and explore co-located compute and data at the edge. Other companies like Azure also offer similar technologies. Deno's KV and fly.io's Flame are innovative products that eliminate the need for provisioning databases and Kubernetes clusters.

Cloudflare's Durable Objects are a new JavaScript runtime that makes building stateful, on-demand backend servers on the edge as easy and cheap as serverless functions. By colocating compute and state, Durable Objects melt complexity at scale, and allow you to focus on building your product.In this fast-paced talk we'll live code a real-time backend from scratch, show how Durable Objects work, and explore how you can apply this versatile tool to a wide range of everyday engineering problems.

Durable Objects - Everything Everywhere All At Once For Not Very Much Money

Jani Eväkallio

En esta charla, presentaré a la audiencia el potencial de OpenAPI para simplificar y mejorar el proceso de desarrollo para las aplicaciones React. Demostraré cómo OpenAPI puede ser aprovechado para autogenerar automáticamente APIs REST, optimizando la consumición de datos dentro de los proyectos React. Con un enfoque agudo en la eficiencia y la fiabilidad, los asistentes obtendrán valiosos conocimientos sobre la implementación de pruebas automatizadas para garantizar la robustez y la calidad en sus aplicaciones.

Cómo consumir automáticamente APIs con React

Today's Talk covers the challenges of developing APIs and the available tools to simplify the process. It also demonstrates building a pizza menu application using React and Fastify, with documentation and SDK generation using Swagger and OpenAPI. Orval is introduced as a tool for generating mutations, testing with mock service worker-generated mocks, and using Zod for validation. It supports multiple languages and frameworks, and allows consuming APIs from various resources. The SDK can be tracked using version control, and Open API specifications can generate Swagger UI and Redux doc asserts.

In this talk, I'll introduce the audience to the potential of OpenAPI in simplifying and enhancing the development process for React applications. I will demonstrate how OpenAPI can be harnessed to seamlessly autogenerate REST APIs, streamlining the consumption of data within React projects. With a keen focus on efficiency and reliability, attendees will gain valuable insights into implementing automated tests to ensure robustness and quality in their applications.

How to Automatically Consume APIs with React

Theodore Vorillas

¡Redux Toolkit 2.0 está aquí! Descubre qué ha cambiado y por qué, el trabajo que se ha invertido en reempaquetar las bibliotecas de Redux, una visión general de las nuevas características y los cambios significativos, y un vistazo a los planes futuros.

¿Qué hay de nuevo en Redux Toolkit 2.0?

Mark Erickson discusses the new features in Redux Toolkit 2.0, including the simplification of Redux logic and the addition of RTK query for data fetching. He mentions the challenges of achieving ESM common JS compatibility and refers to a blog post he wrote about it. The plan to ship major versions of RTK, Redux core, Reselect, and React Redux together is discussed, with a focus on the conversion of Redux core to TypeScript and the need for packaging updates and TypeScript type upgrades.

Redux Toolkit 2.0 is here! Find out what's changedand why, the work that's gone into repackaging the Redux libraries, an overview of new features and breaking changes, and a look at future plans.

What's New in Redux Toolkit 2.0

Mark Erikson

¿Qué tienen en común S.H.I.E.L.D. y A.R.G.U.S. con la computación en el borde?¿Cómo pueden Iron Man y Batman ayudarte a entender la hidratación, la hidratación parcial y la reanudabilidad?¿Qué pueden decirte los Observadores o los Monitores sobre la Reactividad?Únete a esta aventura directamente desde las páginas de un cómic mientras tus héroes y villanos favoritos te ayudan a entender algunos de los temas más discutidos en la web ahora.

Una Guía Nerd para los Conceptos de Tendencia en la Web

Going to conferences can be overwhelming, so the speaker created a guide to trending web concepts using comic book characters. The chosen topic is resumability, and the story of Tony Stark is used to explain it. Resumability allows for immediate interactivity on a web page and is achieved through serialization and execution of code. The speaker challenges the audience to propose topics for future guides.

What do S.H.I.E.L.D. and A.R.G.U.S. have in common with edge computing?How can Iron Man and Batman help you understand hydration, partial hydration, and resumability?What can the Watchers or the Monitors tell you about Reactivity?Join this adventure straight from the pages of a comic book as your favorite heroes and villains help you understand some of the most discussed topics on the web now.

A Nerdy Guide to the Web Trending Concepts

Daniel Afonso

Un discurso de venta para la seguridad - ¡genial! Lo sé, la seguridad a menudo es frustrante o incluso molesta. Pero todos trabajamos en tecnología y en algún momento, la seguridad siempre se convierte en un tema. Descubramos un fallo de seguridad del mundo real y lo que podemos aprender de él para prevenir tales incidentes. Va a ser divertido, lo prometo.

Escapar de los fallos de seguridad

The Talk discusses web security and the importance of strong code protection. It highlights a vulnerability where a weak five-digit numeric code was used, allowing easy access to sensitive content. The speaker emphasizes the need for throttling as a mechanism to prevent attacks. The company implemented throttling and blocked access to photos to improve security. However, stronger code and additional measures, such as limiting access to specific IP addresses and timeframes, are still needed.

An elevator pitch for security - yay! I know, security is often frustrating or even annoying. But we all work in tech and at some point, security always becomes a topic. Let's discover a real-world security flaw and what we can learn from it to prevent such incidents. It's gonna be fun, I promise.

Escape Security Flaws

Henrik Fricke

Los Componentes del Servidor React son un nuevo tema en la comunidad, un montón de marcos de trabajo los están implementando, la gente está discutiendo sobre este tema. Pero, ¿qué pasaría si pudiéramos usar los Componentes del Servidor React en React Native? ¿Y llevar todas las características de optimización que los RSC permiten a las aplicaciones móviles? En esta charla presentaría lo que somos capaces de hacer con los RSC en React Native!

Llevando los Componentes del Servidor React a React Native

React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.

React Server Components are new topic in community, bunch of frameworks are implementing them, people are discussing around this topic. But what if we could use React Server Components in React Native? And bring all optimisation features that RSC allows to mobile apps? In this talk I would present what we are able to do with RSC in React Native!

Bringing React Server Components to React Native

Szymon Rybczak

Los juegos multijugador son los más geniales: nos acercan, incluso cuando estamos luchando. Si bien no puedes construir World of Warcraft en un fin de semana, tampoco necesitas un gran equipo de producción de un estudio de juegos AAA para crear un juego que sea divertido y atractivo. ¡Todo lo que necesitas es el buen viejo React con un poco de magia de Three.js y WebSocket! Esta charla te guía a través de la creación de un simple juego multijugador en el navegador utilizando React Three Fiber y Socket.IO. Aprenderás cómo estructurar el código del juego, renderizar una escena 3D interactiva en el navegador y establecer una comunicación bidireccional entre el cliente y el servidor.

Juegos multijugador con React Three Fiber y WebSockets

We're discussing making multiplayer games in React, focusing on accessibility and development phases. The game architecture involves a monorepo with a single server and WebSocket connections. React context is used for server communication and updating the React state. The game introduces 3D using React 3 Fiber and implements game mechanics like timers. The talk also mentions using generative AI tools for game design and testing with tools like Cypress. Different rendering techniques and the use of Socket.io's rooms feature in the WebSocket server are also discussed.

Multiplayer games are the coolest: they bring us closer together, even when we’re battling it out. While you can’t build World of Warcraft in a weekend, you also don’t need a big AAA game studio production team to create a game that is fun and engaging. All you need is good old React with some Three.js and WebSocket magic sprinkled in! This talk walks you through creating a simple multiplayer game in the browser using React Three Fiber and Socket.IO. You will learn how to structure the game code, render an interactive 3D scene in the browser, and establish two-way communication between the client and server.

Multiplayer Games with React Three Fiber and WebSockets

Maya Nedeljković Batić

Configurar proyectos de JavaScript no es divertido. Empezar implica instalar y configurar node, tsc, prettier, eslint, un marco de pruebas, un controlador de base de datos, y más. ¿Por qué JavaScript no incluye baterías? En esta charla hablaremos de cómo Deno soluciona esto, permitiéndote concentrarte en construir cosas. Exploramos qué beneficios desbloquea la integración completa de herramientas, y recordamos lo divertido que es programar si tus herramientas te ayudan, en lugar de requerir tu cuidado constante.

Javascript Debería Venir Con Baterías

JavaScript Should Come With Batteries: Deno is a next-generation JavaScript runtime that addresses the lack of built-in tooling in JavaScript. It provides a secure and simple way to develop applications with built-in testing, linting, formatting, and a language server for VS Code. Deno is compatible with Node.js and NPM, supports web standard APIs, and allows code portability between frontend and server. It also offers features like a built-in database, a key-value store, and transparent monetization with Deno Deploy.

Setting up JavaScript projects is no fun. Getting started involves installing and configuring node, tsc, prettier, eslint, a testing framework, a database driver, and more. Why is JavaScript not batteries included? In this talk we'll talk about how Deno fixes this, letting you focus on building stuff. We explore what benefits full tooling integration unlocks, and remember how fun it is to program if your tools help you, rather than requiring your babysitting.

Javascript Should Come With Batteries

Luca Casonato

Cuando escribimos código para la Web, hay muchas capacidades que se ofrecen de serie por nuestros navegadores. Si alguna vez escribiste un componente de Carga de Archivos, usaste temporizadores e intervalos, interactuaste con el DOM, o almacenaste algo en el Almacenamiento Local/De Sesión, tuviste que ir a los documentos de la API Web de MDN, para encontrar información relevante sobre cómo implementar ese código. En esta sesión, nos adentraremos en el emocionante mundo de las APIs Web del navegador que no se utilizan tan comúnmente (aunque deberían serlo) y exploraremos sus increíbles capacidades 🚀 Todas estas características ofrecen nuevas oportunidades para crear experiencias web inmersivas que pueden ayudar a las empresas a crecer y conectar con los clientes. Así que si eres el tipo de ingeniero que quiere estar por delante de la curva en lo que respecta al desarrollo web, aprende cómo el Observador de Intersección, la API de Sincronización en Segundo Plano, la API de Bloqueo de Pantalla (y muchas más) pueden ayudarte a crear mejores aplicaciones web que mantendrán a los usuarios enganchados y volverán por más!

Superpoderes de la API Web del Navegador

Today's Talk covers various web APIs and their functionalities, including the intersection observer API, screen wake lock API, background sync API, and broadcast channel API. The speaker emphasizes the importance of optimizing performance and using standardized code to reduce application bundle size. They also highlight the need for environmental responsibility in JavaScript development. The Talk addresses handling API support and modifying code to suit different browser implementations.

When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code. In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀 All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers. So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more!

Superpowers of Browser's Web API

Nikola Mitrovic

En unos meses, Google DESTRUIRÁ tu aplicación React......bueno, más o menos. En marzo, Google está lanzando un nuevo Core Web Vital llamado Interacción hasta el Próximo Pintado (INP). Mide la velocidad de las interacciones, y hasta ahora todos los sitios de React que Ivan ha visto tenían el INP muy en rojo. Esto es malo para cualquier sitio que se preocupe por el SEO.En esta charla, aprendamos cómo prepararnos para el nuevo Core Web Vital: cómo funciona el INP, y cómo mejorarlo, tanto manualmente como con las nuevas APIs de React como useTransition() y React Concurrency.

Prepara tu React, Nuevos Core Web Vitals están Llegando

The Talk discusses the NextPaint metric, a new performance metric introduced by Google that measures the speed of clicks or keyboard input on a page. It explores how React rendering can impact the NextPaint metric and offers optimization techniques such as using the useTransition hook in React 18. The Talk also covers the changes introduced in React 18's rendering process, the impact of wrapping with suspense, and the replacement of the First Input Delay metric with the interaction to the next page. The limitations of useTransition and general React performance optimization strategies are also discussed.

In a few months, Google will DESTROY your React app......well, kinda. In March, Google is releasing a new Core Web Vital called Interaction to Next Paint (INP). It measures the speed of interactions – and every React site Ivan has seen so far had INP way in red. This is bad for any site that cares about SEO.In this talk, let’s learn how to prepare for the new Core Web Vital: how INP works, and how to improve it – both manually and with new React APIs like useTransition() and React Concurrency.

Brace Your React, New Core Web Vitals are Coming

Ivan Akulov

Los Componentes de Servidor React son una forma más nueva de trabajar con React que se adopta ampliamente en marcos de trabajo como Next.js. En esta charla, veremos cómo funcionan y se ejecutan en el lado del servidor, y cómo encajan con la renderización en el servidor y las aplicaciones tradicionales de React.

Componentes de Servidor React

React server components solve the problem of interrupting user interfaces caused by CPU-bound or network-bound web applications. They allow for read-only content to be rendered on the server and interactive elements to be shipped to the client, reducing code shipped and improving performance. Server-side rendering and server-side fetching improve the user experience by reducing delays and flash of unstyled content. Soft navigation with server components enables re-rendering without hard navigation, and using frameworks like Next.js helps with debugging and deployment challenges.

React Server Components are a newer way of working with React that is widely adopted in frameworks like Next.js. In this talk, we will look under the surface of how they work and are executed on the server side, and how they fit with server rendering and traditional React apps.

React Server Components

Tejas Kumar

Imagina ser un caballero preparándose para un torneo de justas, pero tu caballo está más interesado en las pacas de heno de la feria que en tu duelo inminente. Eso es lo que a veces puede sentirse al preparar tu departamento de tecnología para una ronda de inversión o una salida. Esta charla proporciona una mirada en profundidad al papel de un ingeniero de frontend, especialmente trabajando con React, en la preparación de un departamento de tecnología para una ronda de inversión o una salida. A través de una lente única de diligencia técnica, la presentación descubre la importancia de las buenas prácticas, la arquitectura sólida, la documentación eficiente y más.

Preparándose para el Éxito: Guía de un Ingeniero de Frontend para la Diligencia Técnica

Tech due diligence is a thorough examination that can influence a product or company's future, involving analyzing technical architecture, code base, team culture, and more. Front-end engineers play a crucial role in bridging design and functionality. Automation, infrastructure, and documentation are key areas in tech due diligence. Best practices, clean code, and market connections are important for selling. Tech due diligence requires data access and security measures, and companies may be hesitant to fully cooperate.

Imagine being a knight preparing for a jousting tournament, but your horse is more interested in the fair's hay bales than your impending duel. That's what prepping your tech department for an investment round or exit can feel like sometimes. This talk provides an in-depth look into the role of a frontend engineer, especially working with React, in preparing a tech department for an investment round or an exit. Through a unique lens of tech due diligence, the presentation uncovers the importance of good practices, solid architecture, efficient documentation, and more.

Preparing for Success: A Frontend Engineer's Guide to Tech Due Diligence

Armin Ayatollahi

En el mundo dinámico de React, asegurarse de que su código permanezca limpio y mantenible es primordial. Sumérgete en una sesión que desmitifica las complejidades de estructurar tus proyectos de React, separando claramente las preocupaciones y adhiriéndose a las mejores prácticas que resisten el paso del tiempo. A partir de experiencias del mundo real y consejos prácticos, esta charla promete equiparte con el conocimiento para elevar tu base de código de React a la cima de la claridad y la eficiencia.

Creando React Impecable: Mejores Prácticas para un Código Mantenible

React best practices, including state management, component performance, testing, accessibility, and clean architecture, are discussed. The use of useMemo and useCallback should be limited to when necessary, and tools like React's new compiler and Million.js can aid in performance optimization. End-to-end testing and React Testing Library are important for critical functionalities. Accessibility is emphasized, and the use of the xCore/React package is recommended. Logic business can be extracted from components, and file naming and folder structure should be carefully considered. Import aliases and different folder structures can enhance code maintainability. The talk also touches on managing hooks and testing, and ends with a discussion on favorite pizza and online presence.

In the dynamic world of React, ensuring that your code remains clean and maintainable is paramount. Dive into a session that demystifies the intricacies of structuring your React projects, distinctly separating concerns, and adhering to best practices that stand the test of time. Drawing from real-world experiences and hands-on tips, this talk promises to arm you with the knowledge to elevate your React codebase to the zenith of clarity and efficiency.

Crafting Pristine React: Best Practices for Maintainable Code

Miguel Ángel Durán

El desarrollo impulsado por la empatía permite a los desarrolladores crear software que realmente comprende y satisface las necesidades de los usuarios. Esta charla explora técnicas prácticas para integrar la empatía en el proceso de desarrollo, lo que lleva a aplicaciones más intuitivas y amigables para el usuario. Aprenda cómo cultivar la empatía puede fomentar la colaboración, mejorar la calidad del código y, en última instancia, mejorar la satisfacción del usuario. Únase a nosotros para desbloquear el potencial transformador de la empatía en su viaje de desarrollo.

Desarrollo Impulsado por la Empatía

This Talk explores empathy-driven development in software engineering, emphasizing the importance of understanding and applying empathy in code reviews, communication, and team collaboration. It highlights the benefits of empathy, such as personal growth, effective communication, and high code quality, while cautioning against excessive empathy. The Talk also discusses building empathetic teams, conducting empathy workshops, and practicing empathy in interviews. It addresses language barriers, handling engineers, and the role of AI in fostering empathy.

Empathy-driven development empowers developers to create software that truly understands and serves users' needs. This talk explores practical techniques for integrating empathy into the development process, leading to more intuitive, user-friendly applications. Learn how cultivating empathy can foster collaboration, improve code quality, and ultimately enhance user satisfaction. Join us to unlock the transformative potential of empathy in your development journey.

Empathy Driven Development

Manjula Dube

La documentación es esencial para cualquier proyecto y realmente puede "hacerlo o romperlo". Sin embargo, la documentación requiere tiempo para redactar y a veces puede ser olvidada, o las actualizaciones y enmiendas a ella quedan atrás a medida que avanza el proyecto. Además, crear tu documentación con Markdown tiene sus limitaciones, por lo que es posible que no termines con el resultado que deseas o que tu colaborador necesita. Al usar MDX puedes combinar Markdown con código e integrarlo en tu proyecto React. La documentación se convierte en un proceso más eficiente y fluido y, ¿me atrevo a decirlo... divertido?

Cómo MDX es un cambio de juego para la Documentación de tu Proyecto React

Good documentation is crucial and can make or break a project. Word of mouth is important in the industry, and great documentation can attract users. MDX is a powerful tool for writing documentation, allowing for customization and reuse of components. Documentation should be treated like code, with testing and continuous improvement. Responsible AI usage is important, and a balanced approach to documentation, including inline comments and different formats, should be used.

Documentation is essential to any project and it can really "make it or break it".  However documentation is time consuming to draft and can sometimes be forgotten, or updates and amendments to it left behind as the project moves forward.  Additionally, creating your documentation with Markdown has its limitations, so you may not end up with the result you want or that your contributor needs.  By using MDX you can combine Markdown with code and integrate it into your React project.  Documentation becomes a more streamlined and efficient process and dare I say it...fun.

How MDX is a game changer for your React Project's Documentation

Eddie Jaoude

4 de noviembre de 2022 - Era solo un día normal para el "equipo de lanzamiento" mientras nos preparábamos para preparar el primer candidato a la liberación para React Native 0.71. Poco sabíamos cómo un lanzamiento inocuo podría haber desencadenado un efecto dominó que resulta en compilaciones fallidas para casi todos los desarrolladores de React Native. Con la sabiduría de la retrospectiva, repasaremos lo que sucedió, cuáles son nuestras lecciones aprendidas y los puntos bajos de este incidente. Tendremos la oportunidad de mirar a través de las entrañas de React Native, descubrir nuestra cultura de respuesta a incidentes y aprender cómo estamos fortaleciendo nuestro ecosistema para protegernos contra eventos similares en el futuro.   Únete a mí mientras revivimos este incidente, y no pierdas esta oportunidad de obtener información, inspirarte y abrazar las lecciones aprendidas del día que rompí React Native.

El día que rompí React Native

The Talk discusses an incident where a React Native release caused broken builds and how it was fixed. The incident occurred due to the NPM package becoming too big, leading to the move of Android artifacts to Maven central. The use of dynamic versions and the plus dependency in React Native were identified as contributing factors to the problem. Lessons learned include the importance of removing plus dependencies and the need for better recommendations for creating resilient libraries.

4th November 2022 - It was just a regular day for the "release crew" as we were approaching to prepare the first release candidate for React Native 0.71. Little did we know how an innocuous release could have triggered a domino effect resulting in failing builds for nearly every React Native developer out there. With the wisdom of hindsight, we'll walk through what happened, what are our lessons learned and the lowlights of this incident. We'll have the opportunity to look through the internals of React Native, discover our incident-response culture, and learn how we're hardening our ecosystem to protect us against similar events in the future.   Join me as we revive this incident, and don't miss this opportunity to gain insights, be inspired, and embrace the lessons learned from the day I broke React Native.

The day I broke React Native

Nicola Corti

Panel de discusión "Innovación en React"

The Talk discussed various topics related to React, including the wishlist for future versions, the importance of accessibility, reducing bundle size, and improving deployment. It also explored React's innovation, stability, and the role of meta-frameworks. The challenges of contributing to React's open source project were highlighted, along with the need for a more community-driven approach. The Talk concluded with a lunch break announcement.

Panel discussion  "Innovation in React"

Sara Vieira

Sylwia Vargas

He estado desarrollando un marco minimalista para los Componentes del Servidor React (RSC). Esta charla compartirá mi viaje para entender profundamente RSC desde una perspectiva técnica. Demostraré cómo operan las características de RSC a un nivel bajo y proporcionaré ideas sobre lo que RSC ofrece en su núcleo. Al final, deberías tener un modelo mental más fuerte de los fundamentos de los Componentes del Servidor React.

Explorando los fundamentos de los Componentes del Servidor React

This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.

I've been developing a minimalistic framework for React Server Components (RSC). This talk will share my journey to deeply understand RSC from a technical perspective. I'll demonstrate how RSC features operate at a low level and provide insights into what RSC offers at its core. By the end, you should have a stronger mental model of React Server Components fundamentals.

Exploring React Server Component Fundamentals

Daishi Kato

Quería tener un menú de té para mostrar a los invitados y para mi propia referencia. Resulta que los e-Readers usan tan poca energía y pueden renderizar HTML! Compartiré cómo generar un e-book con todas tus bebidas con React, JSX y Deno, así como renderizar una página de portada personalizada con SVG. Sorprende a tus amigos convirtiendo un viejo dispositivo en un menú de té para el hogar inteligente, y aprende cómo escribir tu próximo libro con React.

Hackeando un e-Reader para Mostrar Mi Menú de Té Con JSX

React can be used to create custom menus for e-readers, and the process involves creating an image and e-book with React and loading them onto the e-reader. Writing an EPUB e-book for e-readers involves converting an SVG file into a PNG image and writing the e-book in EPUB format using HTML, CSS, and images. EPUB generators like Pandoc and Dino simplify the process of generating EPUBs from markdown and running JavaScript on the desktop, respectively.

I wanted to have a tea menu to show guests and for my own reference. Turns out e-Readers use so little power and can render HTML! I'll share how to generate an e-book with all your drinks with React, JSX, and Deno, as well as rendering a custom cover page with SVG. Wow your friends by turning an old device into a smart home tea menu, and learn how to write your next book with React.

Hacking an e-Reader to Show My Tea Menu With JSX

Tiger Oakes

He cambiado entre ser ingeniero y gerente tres veces ya. Soy muy consciente de que esto no es algo inusual de hacer. ¡Hay un montón de cambiantes por ahí! En Atlassian estoy en un nuevo grupo de gerentes. Curiosamente, hay muchos gerentes en el grupo que han sido gerentes anteriormente pero se unieron a Atlassian como ingeniero. Entonces, ¿qué nos pasa? ¿Por qué seguimos cambiando nuestro rol? ¿Es aburrimiento? ¿Estamos locos? Creo que en realidad hay un método en la locura. Cada vez que hacemos un cambio es intencional y hay un propósito, y aunque algunos dicen que puede dañar tu carrera, me gustaría llevarte en un viaje para explorar por qué los cambiantes son una raza muy valiosa!

Un Cuento de los Cambiantes. De Ingeniero a Gerente y Viceversa

This talk explores the experience of flip-flopping between being an engineer and a manager in the software development field. It emphasizes the importance of maintaining hands-on technical skills for effective engineering management. The talk also highlights the value of managers having recent technical experience and the importance of leadership from both managers and senior engineers. Overall, the talk encourages those considering a transition to management to go for it and emphasizes the unique role of an engineering manager.

I've flip flopped between engineer and manager three times already. I'm quite aware that this is not an unusual thing to do. There's a heap of flip floppers out there! At Atlassian I'm in a new managers group. Interestingly there are many managers in the group that have previously been managers but joined Atlassian as an engineer. So what's wrong with us? Why do we keep changing our role? Is it boredom? Are we crazy? I think there's actually method to the madness. Each time we make a change it's intentional and there's a purpose, and whilst some say it can hurt your career, I'd like to take you on a journey to explore why flip floppers are a very valuable breed!

A Tale of the Flip Floppers. From Engineer to Manager and Back Again

Matt Colman

Webpack es una herramienta poderosa para construir aplicaciones modernas de JavaScript, pero su arquitectura puede ser compleja y desalentadora para los desarrolladores que son nuevos en ella. En esta charla, nos sumergiremos en el funcionamiento interno de Webpack y exploraremos cómo sus diversos componentes trabajan juntos para crear un paquete. Al final de esta charla, tendrás una comprensión integral de la arquitectura de Webpack y su sistema de plugins. Estarás equipado con el conocimiento para construir aplicaciones complejas usando Webpack con confianza.

La Anatomía de Webpack: Una Inmersión Profunda en Su Arquitectura

Webpack is a module bundler that converts code into a format browsers can read. It has a plugin architecture built with Tappable that allows users to tap into hooks for important events. Tappable instances like compiler and compilation can be used to tap into hooks. The resolver in Webpack is used to check if required paths exist and can modify non-JavaScript files using loaders.

Webpack is a powerful tool for building modern JavaScript applications, but its architecture can be complex and daunting for developers who are new to it. In this talk, we will dive into the inner workings of Webpack and explore how its various components work together to create a bundle. By the end of this talk, you will have a comprehensive understanding of Webpack's architecture and its plugin system. You will be equipped with the knowledge to build complex applications using Webpack confidently.

The Anatomy of Webpack: A Deep Dive Into Its Architecture

Nitin Kumar

En esta charla, exploraremos cómo construir APIs GraphQL escalables y mantenibles para aplicaciones empresariales utilizando patrones de Diseño Guiado por el Dominio y Arquitectura Limpia. Discutiremos la importancia de modularizar su API en torno al dominio empresarial y una mejor organización de subdominios. Pasaremos brevemente por los componentes principales de una API GraphQL, incluyendo resolvers, capa de dominio y capa de base de datos y cómo hemos evolucionado hacia nuestra nueva arquitectura.

Construcción de APIs GraphQL de grado empresarial con Diseño Guiado por el Dominio y Arquitectura Limpia

Today's Talk focuses on building enterprise-grade GraphQL APIs with domain-driven design and clean architecture. The speaker shares their experience and emphasizes the importance of understanding the business domain and aligning software with business requirements. They discuss the layered approach of clean architecture and the benefits it provides for separation of concerns and testing. The Talk also covers the use of GraphQL schema merging and mappers to create a unified schema. The speaker concludes by highlighting the importance of constant observation, evaluation, and improvement in software development.

In this talk, we will explore how to build scalable and maintainable GraphQL APIs for enterprise applications using Domain-Driven Design and Clean Architecture patterns. We will discuss the importance of modularizing your API around the business domain and better subdomain organization. We will briefly go through the main components of a GraphQL API, including resolvers, domain layer, and database layer and how we've evolved them to our new architecture.

Building Enterprise-grade GraphQL APIs with Domain-Driven Design and Clean Architecture

Petar Ivanov

Mientras la tecnología avanza cada vez más, el desarrollo web intenta acercarse más al usuario. Las CDNs y los servidores web están evolucionando, y ahora nos ofrecen la posibilidad de ejecutar lógica del lado del servidor sin depender de un centro de datos único ubicado en un lugar específico del mundo. Presentemos el concepto de The Edge. Veremos cómo funciona, y hablaremos sobre las funciones de Edge. Discutiremos por qué los principales proveedores de hosting están introduciendo esta tecnología, y por qué diferentes marcos de trabajo de JavaScript están modelando sus enfoques basados en la computación Edge.

Empujando los límites hasta el borde

Today's Talk introduces the concept of the Edge and Content Delivery Networks (CDNs), which bring content closer to users, improving performance and security. The Talk also discusses Edge Computing and Distributed Hosting (DH), which processes client data closer to the source for faster delivery of dynamic content. The use of DH offers benefits such as better performance, security, real-time insights, and scalability. The Talk concludes with an overview of Edge concepts, including server-side rendering logic and custom middleware for each request.

While the technology goes further and further, web development tries to get closer to the user. CDNs and web servers are evolving, and they now offer us the possibility to execute server-side logic without depending on a unique data center located in a specific place in the world. Let’s present the concept of The Edge. We will see how it works, and we’ll talk about Edge Functions. We’ll discuss why the main hosting providers are introducing this technology, and why different JavaScript frameworks are modeling their approaches based on Edge computing.

Pushing Boundaries to the Edge

Facundo Giuliani

No pensamos en React como si tuviera sus propios tipos. Pero los tipos de React son una parte fundamental del marco de trabajo - supervisados por el equipo de React, y coordinados con las principales lanzamientos de React.En esta charla de codificación en vivo, veremos todos los tipos que te has estado perdiendo. ¿Cómo obtienes el tipo de props de un componente? ¿Cómo sabes qué ref toma un componente? ¿Deberías usar React.FC? ¿Y qué pasa con JSX.Element?Te irás con un montón de ideas emocionantes para llevar a tus aplicaciones de React, y esperamos que con una nueva apreciación por las maravillas de React y TypeScript trabajando juntos.

Los tipos más útiles de React

Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.

We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.

React Day Berlin 2023

Build apps, not walls