JavaScript Jabber9 Loka 2018

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.

Kokeile Premiumia

Nauti 14 päivää ilmaiseksi

Tilaa Premium

Jaksot(734)

Overcoming JavaScript Load Issues: Import Maps and Performance Enhancements - JSJ 643

In this episode, they dive deep into the intricate world of JavaScript loading and web performance. Join the panel with insightful discussions led by Dan, Charles, Steve, and special guest Yoav Weiss—an expert with extensive experience in web performance from his time at Google, Akamai, and Shopify.They explore the latest initiatives aimed at improving ES modules, import maps, and the challenges faced with script loading, especially when dealing with web workers. They uncover the critical role of sub-resource integrity, the successful integration of integrity support in Chrome and Safari, and the urgent need for advanced import map solutions for large applications.They also delve into the nuts and bolts of optimizing web performance, including the impact of script execution on browser responsiveness, bundling techniques, and innovative strategies for managing resource download priorities. Tune in to hear about the latest developments, engage with provocative questions, and discover ways you can contribute to the ongoing work of the W3C web performance working group. Plus, stay for heartfelt moments, personal anecdotes, and practical recommendations from the speakers. SponsorsWix StudioSocialsLinkedIn: Yoav WeissPicksAJ - Jason Bourne 5-part TrilogyAJ - Crucial MX500 has dethroned SP as my pick for best value server SSDCharles - Imaginiff | Board GameCharles - A Quiet Place: Day One (2024)Steve - How Does OpenAI Survive?Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

8 Elo 20241h 35min

Personal Branding for Developers with Morad Stern - JSJ 642

The JSJ panel talks with Morad Stern from Wix about personal branding; what it is, why it’s important for developers, and how to build it.LinksObama asks America to learn computer scienceConfiguring Apache Solr Multi-core With Drupal and Tomcat on Ubuntu 9.10PicksAJ - War Stories | How Crash Bandicoot Hacked The Original PlaystationAJ - Crash Bandicoot Co-Creator Andy Gavin: Extended Interview | Ars TechnicaAJ - The Story of Spyro the Dragon | Gaming HistorianAJ - Utah Node.js: Scaling Node.js at PlaidSteve - Six13 Uptown Passover - an "Uptown Funk" adaptation for PesachDan - Scott LynchMorad - This Is Marketing: You Can't Be Seen Until You Learn to See: Seth GodinBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

30 Heinä 202451min

Making AI Accessible for Developers - JSJ 641

In this captivating episode, they dive deep into the world of AI, hands-on learning, and the evolving landscape of development with Steve Sewell from Builder.io. They explore the misconceptions about needing deep AI expertise to build AI products and highlight the importance of rapid iteration and practical experience. They discuss everything from the financial implications of AI, and strategies to manage cost and value, to the innovative tools like MicroAgent that are shaping the future of code generation and web design. Steve shares his insights on optimizing AI use in development, the rapid advancements in AI capabilities, and the critical role of integrating AI to enhance productivity without the fear of replacing jobs. Join them as they unravel the complexities of AI, its real-world applications, and how developers can leverage these powerful tools to stay ahead in a competitive market. Plus, stay tuned for personal updates, user interface innovations, and a glimpse into the future of AI-driven design processes at Builder.io.SocialsLinkedIn: Steve SewellPicksCharles - Mysterium | Board GameCharles - TrainingPeaks | Trusted By the World's BestSteve - Introducing Micro AgentSteve - BuilderIO/micro-agentBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

23 Heinä 20241h 25min

Framework Comparisons, Real User Metrics, and Effective Performance Tools - JSJ 640

In today's episode, they dive deep into web performance optimization and the strategies employed by our expert panel to achieve it. Join Dan, Steve, Charles, and guest Vinicius Dallacqua as they explore robust techniques like code splitting, lazy loading, and server-side solutions to enhance website performance.In this episode, you'll hear Vinicius discuss his experiences with different benchmarking frameworks and innovative optimization strategies, including how he improved performance for the Prometheus client for Node. They delve into the importance of performance metrics, data analysis, and real user monitoring (RUM) tools. They underscore the need for precise measurements before and after optimizations and share insights on overcoming the challenges posed by third-party integrations.Hear about practical tools like Partytown and Lighthouse, and how companies like NEXX Insurance have achieved significant performance gains. The conversation also touches on the critical balance between backend performance, CDNs, and frontend optimizations, alongside recommendations for engaging management to prioritize performance enhancements.Plus, for a bit of fun, our episode includes some light-hearted "Dad jokes of the week" and book recommendations around TypeScript and AI. SocialsLinkedIn: Vinicius Dallacqua PicksCharles - Take 5 | Board GameDan - Total TypeScriptSteve - Warp: Your terminal, reimaginedVinicius - Watch Sweet Tooth | Netflix Official SiteBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

16 Heinä 20241h 19min

Adapting to Effect Cluster: JavaScript Developers' Guide to Enhancing Code Maintainability - JSJ 639

In today's episode, they dive deep into the world of JavaScript and TypeScript. They explore the innovative message-passing style between components using Effect Cluster, a game-changing alpha product that integrates seamlessly with solutions like Remix and React Server Components.Join them as Michael sheds light on the ease of transitioning TypeScript developers familiar with frameworks like React and Svelte to Effect, thanks to JavaScript’s component-based mindset and features similar to async/await. They also talk about the role of TypeScript and Effect in ensuring code maintainability and correctness amidst legacy JavaScript at Sisense.As they navigate through topics like performance optimization, multithreading in JavaScript, and backend development, discover how the Effect framework simplifies testing, enhances type inference, and boosts code stability. Plus, they touch on coding challenges, error handling, and the importance of proper monitoring with tools like OpenTelemetry.But it's not all code! They share fun anecdotes from personal experiences with go karting, discuss the NBA draft, and even delve into some light-hearted humor with dad jokes and comedic analogies. This episode is packed with insights, laughter, and invaluable advice for developers and tech enthusiasts alike.Tune in now for a comprehensive discussion filled with expert knowledge, practical tips, and community insights, exclusively on Top End Devs!SocialsLinkedIn: Michael Arnaldi Twitter: @MichaelArnaldiPicksAJ - MSF Basic Rider CourseAJ - Alpine MotoSafe Wind Noise Ear PlugsDan - Pillar of Fire | Episode 1Dan - Pillar of Fire | Episode 2Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

9 Heinä 20241h 35min

Building and Distributing PWAs: Tools, Techniques, and Insights - JSJ 638

In today's episode, they delve into the fascinating world of mobile web development with our esteemed guest, Maximiliano Firtman, a seasoned web developer from Buenos Aires, Argentina, who has over two decades of experience.Join them as Maximiliano takes you on a journey through the evolution of web and mobile development, starting from the early days of pure HTML and classic ASP, progressing through the milestones of Perl, PHP, and eventually into the realm of mobile technologies. He provides an insightful look at how mobile development has transitioned from early platforms like WML and BlackBerry to the modern era of Progressive Web Apps (PWAs).Together with Steve, they unpack the benefits and challenges of bringing the open web into the mobile space, discuss the impact of mobile performance on user experience, and explore various tools and best practices for developing efficient, fast-loading PWAs. From understanding the role of service workers and web manifests to exploring innovative APIs and caching methods, this episode is packed with invaluable knowledge for any developer aiming to enhance their mobile web development skills.Whether you're interested in optimizing web performance, getting hands-on with PWAs, or curious about the future of mobile app distribution, this episode has something for everyone. Tune in now to uncover actionable insights and expert advice on staying ahead in the ever-evolving landscape of mobile web development.SocialsLinkedIn: Maximiliano FirtmanFirt.DevPicksMaximilliano - llama-cliSteve - The ClubBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

2 Heinä 202437min

High-Performance Networking: Key Resources and Tools for Web Developers - JSJ 637

Robin Marx is a Web Protocol and Performance Expert at Akamai. They dive deep into the fascinating world of networking performance, where experts share invaluable resources and insights to optimize your web development projects. The speakers recommend essential tools and books like "High-Performance Browser Networking" by Ilya Grigorik and Barry Pollard's work on HTTP 2, and they dissect the nuances of modern web protocols such as HTTP 2 and HTTP 3. Special guest Robin Marx joins us to unveil the complexities of networking, emphasizing the importance of understanding how your server and browser interact to maximize efficiency.But it's not all technical; they also share some lighter moments. Discover TV shows like Netflix’s "Eric" and "Criminal Minds Evolutions," explore engaging articles from Big Think, and indulge in some geeky humor with a segment of dad jokes. Whether you're tuning in for professional insight or just some good old tech banter, this episode has something for everyone.SocialsLinkedIn: Robin MarxPicksCharles - Skyjo | Board GameCharles - Criminal MindsDan - Watch Eric | Netflix Official SiteRobin - We Are Legion (We Are Bob)Robin - HadesSteve - Is the Universe Finite or Infinite?Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

25 Kesä 20241h 22min

Transforming React Development: The Experimental Compiler’s Approach to Memoization and Performance - JSJ 636

In this episode, they dive deep into the latest advancements in React with a special focus on the experimental React Compiler. Our guest speakers, Sathya Gunasekaran and Joe Savona, share their insights on how this cutting-edge tool aims to enhance performance and streamline development without disrupting existing code. They explore the goals of the React Compiler, including auto memoization, linting, and runtime optimizations, and how it plans to minimize unnecessary DOM updates. This is an in-depth discussion on subjects like referential equality, the complexities of memoization, API improvements for useEffect, and the compelling debate about whether React should introduce signals as a TC39 standard. Additionally, they discuss the potential transition for existing projects, the importance of community feedback, and the intriguing differences between React’s approach to UI as a function of state versus the signal-based model.Stay tuned to learn about the future of React, the practical benefits of the new compiler, and the ongoing experiments that could shape how we write and optimize JavaScript with React.SocialsLinkedn: Sathya GunasekaranPicksAJ - webinstall.devDan - Godzilla Minus One (2023)Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

18 Kesä 20241h 29min

Kaikki yhdessä sovelluksessa

Kuuntele kaikki suosikkipodcastisi ja -äänikirjasi yhdessä paikassa.

Sinulle valikoitua sisältöä

Podme-sovelluksessa kokoat suosikkisi helposti omaan kirjastoosi. Saat meiltä myös kuuntelusuosituksia!

Jatka kuuntelua koska tahansa

Voit jatkaa siitä mihin jäit, myös offline-tilassa.

Premium

9,99 €/kk

Kaikki premium-podcastit
Ei mainoksia
Ei sitoutumista, peruuta koska tahansa

Aloita 14 päivän kokeilu

Premium

13,99 €/kk

Kaikki premium-podcastit
Ei mainoksia
Ei sitoutumista, peruuta koska tahansa
Yksi lisäkäyttäjä

Kokeile 14 päivää maksutta

Suosittua kategoriassa Liike-elämä ja talous

Tarinat ja äänet, joita rakastat kuunnella

Kuuntele kaikki suosikkipodcastisi ja -äänikirjasi

Lue lisää