This is an archived version of the site

Day 2 - Full-stack

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.

BUY RECORDINGS

Tuesday
February 23
15:00 - 15:30

Day 2: Full-Stack

Introduction to JSworld Conference Day 2 focussed on Full-Stack.

15:30 - 15:59

Introduction to Fastify

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.

Speaking
Matteo Collina
Matteo Collina
Technical Director at Nearform
15:59 - 16:26

Implementing a test suite in an existing Frontend application

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.

Speaking
Mirjam Bäuerlein
Mirjam Bäuerlein
Frontend Developer at BRYTER
16:26 - 16:58

Micro frontends: The Good, The Bad, and The Ugly

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.

Speaking
Vanessa Böhner
Vanessa Böhner
Lead Frontend Developer at The Life Company
16:58 - 17:30

How can Webpack Module Federation be a Micro Frontends game changer

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.

Speaking
Natalia Venditto
Natalia Venditto
Principal Solutions Architect. GDE for Web Technologies and Angular at Netcentric
17:30 - 18:04

TypeScript for APIs

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.

Speaking
Joshua Goldberg
Joshua Goldberg
Senior Frontend Engineer at Codecademy
18:04 - 18:19

Magic Authentication, The Missing LEGO Piece

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.

Speaking
Sean Li
Sean Li
CEO at Magic
18:19 - 18:43

Sky’s the limit: Headless eCommerce with Next.js

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:

  • Customers experience a fast and seamless experience
  • Managers get rapid and reusable development
  • Editors are able to edit content easily any time they want
  • Developers can code without technical constraints

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.

Speaking
Lisi Linhart
Lisi Linhart
Developer Experience Engineer at Storyblok
18:43 - 19:22

Solutions at Scale

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.

Speaking
Belén Curcio
Belén Curcio
Director of Solutions at Vercel
19:22 - 19:52

Jamstack at Scale

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.

Speaking
Ishan Anand
Ishan Anand
Co-founder and CTO at Moovweb
19:52 - 20:45

PANEL DISCUSSION: Static eCommerce

Panel Discussion: Moovweb, VueStoreFront, Vercel

"Static e-commerce" - using an SSG approach for e-commerce, so going beyond just Jamstack but leveraging static hosting.

Hosted by
Israel Roldán
Israel Roldán
Engineering Manager at Passionate People
Gift Egwuenu
Gift Egwuenu
Front-end Developer at Passionate People

By continuing to visit this site, you accept the use of cookies by Google Analytics for statistical purposes.