Day 2 - Full-stack
Tuesday 23rd February - Full Stack JavaScript Development for all the enthusiasts we will dive deeper into programming for the browser and server with modern tooling. Having a more specific look on case studies and all relevant tech: JavaScript, TypeScript, Angular, Vue, Node.js, Deno, MongoDB, GraphQL and full-stack frameworks.
Introduction to JSworld Conference Day 2 focussed on Full-Stack.
Tech: Fastify, Node.js, Live-Coding
Fastify is a web framework for Node.js that has a great satisfaction across developers with a 89% rating in the last state of javascript.
Fastify combines an amazing developer experience with top of the class performance, with minimal reduction on top of Node.js core.
In this talk, Matteo will go through the fundamentals of the framework as well as a live coded example.
Tech: Frontend Testing, Page Speed, YSlow, Cypress, Jasmine
Nobody wants to work with Legacy Code. Yet it’s what many of us do.
Michael Feathers wrote - short, painful and beautifully true: Legacy Code is code without tests. It doesn’t matter how old it is or who it was written by.
Complexity in frontend development grew rapidly in the last years. The habit of writing tests did not. Now they are everywhere: Grown software systems without any tests in the frontend.
Tech: Scalable Architecture, semantic versioning, Vue Server Renderer Plugin, TypeScript
Everybody is talking about slicing up the monolith. The goal is to create scalable architectures. But how can we achieve that?
For one project, we have decided to give everything, using cutting edge technology, micro-services, verticals, server-side rendering, and more. Talking about upgrading the legacy code base, the plan was to have this greenfield project on separate URLs.
We wrote micro-frontends in Vue.js + Vue Server Renderer Plugin, UI Components as web components and first-party libraries in Typescript.
In this talk, we'll go through the example of an online shop. I won't try to sell you the idea of micro-frontends. But I can show you what we've learned on this bumpy road with memory leaks and semantic versioning.
Tech: Webpack5, Micro Frontends
How can Webpack Module Federation be a Micro Frontends game changer
During this talk we will discuss Webpack 5 most awaited for feature, Module Federation, and discuss how it could become a game-changer for very valid use cases of micro-frontend implementations.
Tech: TypeScript, API, OpenAPI, GraphQL
Developers love APIs that make usage easy. Whether we're installing packages on npm, passing data within a project, or integrating with an external service, we don't want confusion or uncertainty around whether our code will work. TypeScript provides a great standard for describing the shapes of all those things and more. Formalizing our APIs with it provides a plethora of benefits for JavaScript and TypeScript projects alike.
In this talk, we'll explore how to use TypeScript to set up a "pit of success" for bringing in external code to a project. We'll start off by exploring how npm packages are described by TypeScript "definition files" -- even when the package author and/or consumer aren't themselves using TypeScript. Next, we'll expand these definitions using auto-generation tools such as OpenAPI ("Swagger") that keep shared definitions for known API entities updated across projects. Swagger segues well into GraphQL, which provides a host of options for generating full type definitions and clients from schemas in your code.
Tech: JamStack, Magic Authenticaiton
Sean will be giving an introduction to Magic passwordless authentication and how it enables developers to effortlessly build more feature-rich Jamstack applications with just a few lines of code.
Tech: Storyblok CMS, Next.js Commerce, Headless CMS
Imagine combining a world-class editing experience with a beautiful eCommerce storefront. The result? Everyone is happy:
This talk will show how to connect Next.js commerce with Storyblok CMS and deliver value to all of these players. It will explain the advantages of connecting two headless systems for creating flexible storefronts that work for everyone.
Tech: Solutions Architecture
If there is something we learned this past 2020 is that we need to build resilient architectures now more than ever.
Belén works as a Director of Solutions at Vercel and previously Lead Frontend Engineer at Mozilla.
Tech: eCommerce, JamStack, CDN
Many eCommerce sites have more than 10,000 products—Staples has 100,000 products online and REVOLVE has 40,000 products, for example. Publishers such as The New York Times (200 stories per day) or Washington Post (500 stories per day), generate over 50,000 stories a year. Moreover, operators of these larger sites are more likely to A/B test and personalize content, deploy incrementally, change content intraday, and demand fast page loads.
How do we bring large sites like these into the Jamstack era?
Jamstack promises high traffic scalability, but at the tradeoff of a build step that presents a new scaling challenge as the number of pages on the site, or frequency of changes, increases.
In this talk, we’ll cover the lessons learned from powering a variety of large headless sites that use Next.js and survey techniques that deliver the Jamstack-like benefits of front-end developer empowerment by serving data from the CDN for large-scale websites that change frequently. The talk will include many relevant examples from about a dozen eCommerce and other complex websites.
We’ll start by reviewing static techniques, such as incremental builds and delegating dynamic content to APIs during hydration. Then we’ll move on to discussing dynamic “Jamstack-like” techniques using serverless technologies, such as stale-while-revalidate, mixing dynamic and static pages together, and ensuring CDN caching rules respect the Jamstack approach. Finally, we’ll close with some rules of thumb for figuring out which approach makes sense for you.
Panel Discussion: Moovweb, VueStoreFront, Vercel
"Static e-commerce" - using an SSG approach for e-commerce, so going beyond just Jamstack but leveraging static hosting.