JSJ 334: “Web Performance API” with Dan Shappir

JSJ 334: “Web Performance API” with Dan Shappir

Panel: Special Guests: Dan Shappir (Tel Aviv)In this episode, the panel talks with Dan Shappir who is a computer software developer and performance specialist at Wix.com. As Dan states, his job is to make 100 million websites (hosted on the Wix platform) load and execute faster! Past employment includes working for companies, such as: Ericom, Ericom Software, and BackWeb. He studied at Technion Institute of Management and currently lives in Tel Aviv, Israel. The panel talks about web performance API among other things. Check it out!Show Topics:1:29 – Charles: Let us know who you are and why you’re famous!1:39 – “Hello!” from Dan Shappir.2:25 – Charles: You should say that you go to EACH site EVERY day out of the millions of sites out there.2:53 – Charles: My mom mentioned Wix to me at first. My mom teaches High School Math.3:16 – Dan: Yes that is our mission statement. That everyone can get a website without the knowledge of how to build a website.3:52 – Aimee makes her comments.3:59 – Dan: On our platform we try to offer people flexibility. There are bounds and limits, but people can do their very own thing, though. To make Wix faster because as we add more features and functionality that is our goal.4:40 – Chuck: Okay, I know how to make X perform a little bit better. You are looking at a platform that controls TONS of sites, how do you even go about that?4:58 – Dan: It is more difficult then that. We have millions of users leveraging the platform but there are a lot of developers in Wix who are developing the platform. I don’t think anyone at Wix has a total grasp of the complexity of the platform that we built. We have hundreds of frontend people working on our platform. All of them have pieces to the kingdom. We have processes in place with code reviews and whatnot, but there is so much going on. There is a change every 2 minutes, 24/7. We need to make sure progressing instead of regressing. 6:54 – Aimee: I think it was interesting in one of the links you sent over. Because you know when something is getting worse you consider that a bug.7:15 – Dan: It is more than a bug because if we see regression in performance then that is a problem. I can literally see any part of the organization and say, “stop” if it will7:57 – Chuck: We are talking about performance, but what does that mean? What measures are there?8:15: Dan: We are looking at performance can mean different things in different contents. User sites, for example, most important aspect is load time. How quickly the page loads and gets open to the viewer to that specific site. When they click something they want it instantly and no drag time. It does change in different contexts.9:58 – Chuck: People do talk about load time. People have different definitions of it.10:12: Dan: Excellent question. When you look at the different sites through Wix. Different people who build sites – load time can mean something else to everybody. It can mean when you see the MAIN text or the MAIN image. If it’s on an ECON site then how soon can they purchase or on a booking site, how long can the person book X product.I heard someone at a conference say that load time is when: HERO TEXT And HERO IMAGE are displayed.12:14 – Chuck: What is faster React or Vue?12:21 – NEW HOST: Not sure. It all depends.12:34 – Dan: We are big into React. We are one of the big React users outside of Facebook. I joined Wix four years ago, and even back then we were rebuilding our framework using React. One of our main modifications is because we wanted to do server-side rendered.13:27 – Christopher asks Dan a question.14:16 – Dan: We are in transition in this regard. Before we were totally client-site rendered, and that was the case until middle of last year. Then we deployed...Dan: We are 100% server-side rendered now. Some things we are still using JavaScript. We have another project going on now and it’s fully CSS, and little JavaScript as possible. What you might want to do with that site is...You might get in a few months every Wix site will be visible even if JavaScript is disabled.16:26 – Aimee adds in her comments and observations to this topic.16:55 – Dan: We don’t want things displayed incorrectly before it lays out. We hide the content while it’s downloading then make it visible. They lay-outing are done faster, because...17:44 – Christopher asks Dan a question.18:04 – Dan: I got into API...Either you are moving forward or are you moving back. AKA – You are either progressing or regressing.Different stages:1.) Development stage2.) Pre-Production (automated tools that check the performance with specific use cases)3.) Check it out!It’s beneficial to use these APIs.21:11 – Christopher: What is performance APIs?21:38 – Dan: There is a working group – Todd from Microsoft and others who are exposing the information (that is available in the browser) out into the browser. When the browser downloads a certain source (image, font, etc.) it can measure the various stages of downloading that feature. You have these different sages of downloading this resource. The browser can measure each of these stages and then expose them to you. Basically it’s for the browser to expose this information to you and in a way that is coherent and uniform. It essentially maintains this buffer that puts performance entries sequentially.Dan continues explaining this topic in detail.25:55 – Dan: You have this internal buffer...28:45 – Advertisement – Sentry – They support opensource.29:39 – Christopher: everything you are saying seems that I can use this or that tab right now...Why would I prefer the API to something visual, hypothetically?30:03 – Dan: Three Different Stages. (See above.)This information is very, very helpful during the developmental stage. Say you got a link from someone...Dan mentions: Performance.mark 34:04 – Aimee: When you were talking about resource-ends. Many people don’t know what this is. Can you spend 2-3 minutes about how you guys are using these? Are there people can add for big bang for their buck?34:41 – Dan: This might want to be a topic for its own podcast show.Dan gives a definition of what a resource-end means.Go back to fonts as an example.Pre-connect for example, too.39:03 – Dan: Like I said, it’s a huge topic.You have to exercise some care. Bandwidth is limited. Make sure you aren’t blocking other resources that you do need right now.40:02 – Aimee: Sounds like a lot of great things to tap into. Another question I have is about bundling.40:27 – Dan: One of the things that we try to do (given that we are depending on the JavaScript we are downloading) we need to download JavaScript content to the client side. It has been shown often that JS is the most impactful resources that you need to download. You really want to be as smart as possible with that. What is even more challenging is the network protocols are changing.Dan continues to go in-depth about this topic. Dan: What we have found is that you want to strive to bundle resources together.44:10 – Aimee: Makes sense.44:15 – Dan continues talking about this topic.45:23 – Chuck asks two questions. (First question is now and second question is at 51:32.)2 Questions:1. You gather information from web performance AI - What system is that?45:42 – Dan: I am not the expert in that. I will try not to give misleading information. Actually let me phrase it different. There are 3rd party tools that you can use leverage in your website. IF you are building for commercial reasons I highly recommend that you use performance-monitoring solution. I am not going to advertise one because there are tons out there. We ended up rolling out our own infrastructure because our use case is different than most.At a conference I talked with a vendor and we talked about...51:32 – 2nd Question from Charles to Dan: Now you’ve gathered this information now what to you do? What patterns? What do you look for? And how do you decide to optimize things?54:23 – Chuck: Back to that question, Dan. How should they react to it and what are they looking for54:41 – Dan: Three main ways: 1.) Generate alerts 2.) See trends over long period of time 3.) Looking at real-time graphs.Frontend developer pro is that likely being woken up in the middle of the night is lower. We might be looking at the real time graph after we deployed...57:31 – Advertisement – Get a Coder Job!58:10 – Picks!Links:

Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

Avsnitt(725)

Speaking Up: The Developer’s Guide to Conference Talks & Career Growth - JSJ 682

Speaking Up: The Developer’s Guide to Conference Talks & Career Growth - JSJ 682

In this episode of JavaScript Jabber, I am joined by three incredible guests — Ariel Shulman, Liad Yosef, and Evyatar Alush — to dive into the world of public speaking in tech. From the jitters of their first talk to the professional and personal growth that comes with hitting the stage, we unpack the full journey of becoming a tech speaker. Whether you're just curious about getting started or want to sharpen your presentation game, this episode is packed with real talk and insights from experienced voices in the community.We get personal about the why, the how, and the what next of conference speaking — covering the motivations, the process of getting accepted, tips for preparing standout talks, and even how public speaking can open doors to career-changing opportunities. If you've ever wondered what it really takes to be heard on stage, this conversation might just be your launchpad.🔗 Links & ResourcesReact Next ConferenceNo TLB ConferenceJS Heroes RomaniaSessionize - CFP platformReversim Tech ConferenceReact SummitGitNation ConferencesBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

10 Juli 1h 44min

How Holepunch Is Redefining Peer-to-Peer Apps with Bare.js — A New Era for JavaScript Developers -JSJ 681

How Holepunch Is Redefining Peer-to-Peer Apps with Bare.js — A New Era for JavaScript Developers -JSJ 681

In this episode, we sit down with Mathias Madsen, CEO of Holepunch, and take a wild ride through the cutting edge of peer-to-peer JavaScript development. Mathias shares his journey from accidentally discovering JavaScript in college to becoming a prolific contributor with over 1,500 open source modules. His passion? Building decentralized, peer-to-peer systems where JavaScript isn’t just for the browser—it powers the entire stack.We dive deep into how Holepunch is reimagining application distribution with their Pear system —essentially turning peer-to-peer into a first-class citizen for distributing full applications, not just files. No hosting, no servers — just apps shared directly, BitTorrent-style. And because packaging and distributing Node-based apps can be painfully complex, they took things a step further by building a new runtime: Bare.jsBare.js is refreshingly "bare": it strips away the heavy, opinionated APIs bundled into Node or Deno, leaving just the JavaScript core and a powerful module system. What’s revolutionary here is Bare's ability to run the same codebase across desktop, mobile, and even tiny embedded devices—swapping out engines like V8, JavaScriptCore, or JerryScript depending on the platform's needs. This allows Mathias' team to write backend logic once, share it across all platforms, and iterate at lightning speed.Key takeaways:-Peer-to-peer can go far beyond media sharing — it's being used for full app distribution.-Bare.js decouples JavaScript from specific platforms, creating a universal backend that just works anywhere.-Modular design isn't just a philosophy — it's the secret to Holepunch’s rapid development pace.-The combination of React Native for UI and Bare.js for backend creates an insanely productive development pipeline, fully cross-platform.If you’re into JavaScript, peer-to-peer tech, or just love hearing about developers breaking the mold, this one’s for you.About the GuestMathias is the CEO of Holepunch (https://holepunch.to/). He brings his passion for open-source software, and deep experience in the area, having  published more than 1000 modules to npm, the Node.js package manager, totaling billions of downloads every month.Mathias Buus is a self taught Javascript hacker from Copenhagen. He works full time on open source projects and has been working with Node.js since the 0.2 days. Mathias likes to work with P2P and distributed systems and is the author of more than 550 modules on npm, including some of the most popular ones for working with streams. In addition he has spoken about mad science projects at various conferences around the world.Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

24 Juni 1h 6min

Migrating a Legacy JavaScript Codebase to TypeScript - JSJ 680

Migrating a Legacy JavaScript Codebase to TypeScript - JSJ 680

In this episode, Dan and I (Steve) dove deep into what turned out to be a surprisingly complex, yet incredibly insightful topic: gradually migrating a massive legacy JavaScript project over to TypeScript. We're talking about nearly 1,000 JS files, 70,000+ lines of code, and years of developer history—all transitioning carefully to a typed, modern future.Dan walked us through how he started by setting up the project for success before converting even one file—getting CI/CD ready, setting up tsconfig.json, sorting out test dependencies, dealing with mock leaks, and even grappling with quirks between VS Code and WebStorm debugging.We talked tools (like TS-ESLint, concurrently, and ts-node), why strict typing actually uncovered real bugs (and made the code better!), and why it’s crucial not to touch any .js files until your TypeScript setup is rock solid.Key Takeaways:Gradual migration is 100% possible—and often better—than ripping the bandaid off.TypeScript can and will catch bugs hiding in your JavaScript. Be prepared!Use VS Code extensions or TS-Node to support your devs’ tooling preferences.Don't underestimate the setup phase—it’s the foundation of long-term success.Start small: Dan's team converted just one file at first to test the whole pipeline.If you’re sitting on a legacy JS project and dreaming of TypeScript, this episode is your blueprint—and your warning sign.Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

5 Juni 1h 25min

TypeScript, Security, and Type Juggling with Ariel Shulman & Liran Tal - JSJ 679

TypeScript, Security, and Type Juggling with Ariel Shulman & Liran Tal - JSJ 679

In this episode, we dove headfirst into the swirling waters of TypeScript, its real-world use cases, and where it starts to fall short—especially when it comes to security. Joining us from sunny Tel Aviv (and a slightly cooler Portland), we had the brilliant Ariel Shulman and security advocate Liran Tal bring the heat on everything from type safety to runtime vulnerabilities.We started off with a friendly debate: Has TypeScript really taken over the world? Our verdict? Pretty much. Whether it’s starter projects, enterprise codebases, or AI-generated snippets, TypeScript has become the de facto standard. But as we quickly found out, that doesn’t mean it’s perfect.Key Takeaways:-TypeScript ≠ SecurityWe tend to trust TypeScript a bit too much. It’s a build-time tool, not a runtime enforcer. As Liran pointed out, “TypeScript is not a security tool,” and treating it like one leads to dangerous assumptions.-Type Juggling is Real (and Sneaky)We explored how something as innocent as using as string on request data can open the door to vulnerabilities like HTTP parameter pollution and prototype pollution. Just because your IDE is happy doesn’t mean your runtime is.-Enter Zod – Runtime Type Checking to the Rescue?Zod got some love for bridging the dev-time/runtime gap by validating data on the fly and inferring TypeScript types. But even Zod isn’t foolproof. For example, unless you're using .strict(), extra fields can sneak past your validations, leading to mass assignment bugs.-Common Developer FallaciesWe discussed the misplaced confidence developers have in things like code coverage and TypeScript alone. One of the big takeaways: defense in depth matters. Just like testing, layering your security practices (like using Zod, type guards, and proper sanitization) is key.-TypeScript Best Practices Are EvolvingFrom discriminated unions to avoiding any, from using Maps over plain objects to prevent prototype pollution—TypeScript developers are adapting. And tools like modern Node.js now support type stripping, which makes working with .ts files at runtime a bit easier.Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

29 Maj 1h 32min

Building Agentic AI Workflows with Matthew Henage - JSJ 678

Building Agentic AI Workflows with Matthew Henage - JSJ 678

In this episode, we sat down with full-stack developer and AI innovator Matthew Henage, creator of WAOS.ai (Web App Operating System) and the incredible storytelling platform SpeakMagic.ai. This conversation took us deep into the world of agentic AI, low-code app building, and the future of intelligent workflows.We kicked things off with Matthew sharing how he’s been riding the AI wave since GPT-3.5 blew his mind. His platform WoWs is all about making it easy for developers to build powerful web apps with embedded AI workflows — think of it like Zapier meets ChatGPT, but with agents working together instead of API chains.One of the most eye-opening parts of our chat was learning about agent swarms — essentially teams of specialized AI agents that collaborate to perform complex tasks. Instead of relying on one giant AI brain to do everything, you create smaller, purpose-built AIs that handle specific steps in a workflow. It’s scalable, smarter, and kind of like assembling your dream dev team… but all made of code.Matthew’s Speak Magic project is a jaw-dropper. It uses a swarm of over 40 agents to turn a single story idea into a fully animated, two-minute video — complete with scenes, scripts, character animations, music, and more. It’s AI storytelling on steroids.We also talked a lot about:Best practices for building reliable AI workflowsThe importance of keeping context windows small (under 4,000 tokens works best!)How prompt engineering is becoming the new programmingUsing AI for vibe coding (yes, that’s a thing) and rapid prototypingThe tradeoffs between using traditional programming vs. letting AI handle logicEthical considerations and how to handle memory and privacy in long-running user interactionsCheck out Matthew’s work at WAOS.ai and speakmagic.ai — and as always, stay curious and keep building!Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

22 Maj 1h 3min

Reinventing Web Development with Brisa: A Conversation with Aral Roca - JSJ 677

Reinventing Web Development with Brisa: A Conversation with Aral Roca - JSJ 677

In this week’s episode, it’s just me — Charles Max Wood — and I’m joined by the incredibly sharp and open-source-loving Aral Roca, direct from Barcelona! Aral’s the creator of Brisa, a new full-stack web framework that flips the script on how we build modern web apps. If you thought the "another day, another framework" meme was played out... well, Brisa might just change your mind.Key Takeaways:-Brisa’s Big Idea: It's designed to let you build web apps with minimal or zero JavaScript on the client side. Think HTML streaming, server actions, and components that render server-side first, but can gradually hydrate on the client.-Server-first FTW: Aral walks us through how Brisa handles server actions — even capturing click and scroll events on the server — using ideas inspired by HTMX, LiveView, and server components from frameworks like Next.js.-Tiny and Mighty: The whole framework is incredibly lightweight. Web components come in at just ~3 KB, and the built-in i18n system is under 1 KB!-From Idea to Reality: Aral started Brisa to scratch his own itch — building side projects and blogs without bloated front-end code. But now, others are using it too (yes, even in production!), including one travel agency that's gone all-in.-Multi-platform Future: Brisa has adapters in the works for Vercel, Node, and Deno — plus integration with Tauri for building native Android, iOS, and desktop apps from the same codebase.-What's Coming: Roadmap goals include improved hot reloads, more adapters, transitions, lazy-loaded components, and a better playground for developers to tinker with.Oh, and yes — Aral does parkour. For real.This episode is packed with deep technical insight and exciting potential for a new way to build web apps — especially for devs who love fast performance, server-rendering, and clean architecture.Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

15 Maj 1h 5min

Building Enterprise Infrastructure with Bit & AI with Gilad Shoham - JSJ 676

Building Enterprise Infrastructure with Bit & AI with Gilad Shoham - JSJ 676

In this episode, I (Steve Edwards) flew solo on the mic but had the pleasure of hosting a truly insightful conversation with Gilad Shoham, VP of Engineering at Bit.Cloud. Gilad brought the heat from Israel as we explored how Bit is revolutionizing enterprise software architecture—and how AI is being layered on top to supercharge developer productivity.We started by breaking down Bit’s core platform, which helps teams compose applications from reusable, independently versioned components. Think Lego blocks, but for your codebase. It’s all about boosting dev velocity, reducing duplication, and making collaboration across teams more seamless.Gilad walked us through some jaw-dropping features: versioning without Git, deep component CI pipelines, and even Bit’s ability to replace monolithic repositories with a graph of decoupled components. Everything is Node + TypeScript under the hood, and while it’s currently JS-focused, the ambition is clearly broader.Then came the big twist: AI. Bit is now leveraging AI not to just write code, but to compose it using existing components. Instead of bloating your codebase with endless variations of the same button, Bit’s AI understands your graph and builds features by intelligently reusing what’s already there. It’s like Copilot with a memory—and architectural sense.Key takeaways:Bit components wrap your existing code (like React/Vue) with metadata, testing, and versioning.Their infrastructure makes it possible to build and test components independently and in parallel.The AI strategy is reuse-first: generate only when needed, always compose from what already exists.Even massive enterprise codebases can gradually migrate to Bit without a full rewrite.Expect a human-in-the-loop process, but with most of the heavy lifting handled by AI.Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

8 Maj 58min

Replacing Create React App: Why Create TS Router App Is the Future of React Development - JSJ 675

Replacing Create React App: Why Create TS Router App Is the Future of React Development - JSJ 675

We’ve been diving into the evolving landscape of React app development and why tools like Create TS Router App (CTA) are stepping up to fill the gap left by the deprecation of Create React App (CRA). What we’ve learned is that SSR (server-side rendering) isn’t one-size-fits-all—e-commerce sites need it for SEO and performance, but internal tools and dashboards often don’t. That’s where CTA shines. It gives us a fast, modern, Vite-powered setup with TanStack Router built in, so we can start small and scale up without committing to heavy frameworks like Next.js from day one.What we love about CTA is how it keeps things familiar (same structure as CRA) while giving us type safety, file-based routing, and the flexibility to add only the features we need—like Clerk, Sentry, or even SolidJS support. Whether we’re building a simple prototype or a full-featured app, CTA makes the experience smoother, more intuitive, and future-friendly.Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

2 Maj 1h 30min

Populärt inom Business & ekonomi

framgangspodden
varvet
badfluence
svd-ledarredaktionen
rss-borsens-finest
uppgang-och-fall
avanzapodden
lastbilspodden
rss-dagen-med-di
borsmorgon
fill-or-kill
affarsvarlden
rss-kort-lang-analyspodden-fran-di
tabberaset
kapitalet-en-podd-om-ekonomi
dynastin
rikatillsammans-om-privatekonomi-rikedom-i-livet
montrosepodden
rss-inga-dumma-fragor-om-pengar
rss-en-rik-historia