JSJ 334: “Web Performance API” with Dan Shappir
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.

Jaksot(735)

175 JSJ Elm with Evan Czaplicki and Richard Feldman

175 JSJ Elm with Evan Czaplicki and Richard Feldman

02:27 - Evan Czaplicki IntroductionTwitter GitHubPrezi 02:32 - Richard Feldman IntroductionTwitter GitHubNoRedInk02:38 - Elm @elmlang04:06 - Academic Ideas05:10 - Functional Programming, Functional Reactive Programming & Immutability16:11 - ConstraintsFaruk AteşModernizrThe Beauty of ConstraintsTypes / Typescript24:24 - Compilation27:05 - Signals start-app36:34 - Shared Concepts & Guarantees at the Language Level43:00 - Elm vs React 47:24 - IntegrationPortslunr.js52:23 - Upcoming Features54:15 - TestingElm-Test elm-check56:38 - Websites/Apps Build in ElmCircuitHub58:37 - Getting Started with ElmThe Elm Architecture Tutorial Elm Examples59:41 - Canonical Uses?01:01:26 - The Elm Community & ContributionsThe Elm Discuss Mailing ListElm user group SFStack Overflow ?The Sublime Text PluginWebStorm Support for Elm?Codagrunt-elm gulp-elmExtras & ResourcesEvan Czaplicki: Let's be mainstream! User focused design in Elm @ Curry On 2015 Evan Czaplicki: Blazing Fast HTML: Virtual DOM in ElmPicks The Pragmatic Studio: What is Elm? Q&A (Aimee) Elm (Joe) Student Bodies (Joe) Mike Clark: Getting Started With Elm (Joe) Angular Remote Conf (Chuck) Stripe (Chuck) Alcatraz versus the Evil Librarians (Alcatraz, No. 1) by Brandon Sanderson (Chuck) Understanding Comics: The Invisible Art by Scott McCloud (Evan) The Glass Bead Game: (Magister Ludi) A Novel by Hermann Hesse (Evan) The Design of Everyday Things: Revised and Expanded Edition by Don Norman (Richard) Rich Hickey: Simple Made Easy (Richard) NoRedInk Tech Blog (Richard)Special Guests: Evan Czaplicki and Richard Feldman. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

2 Syys 20151h 9min

174 JSJ npm 3 with Rebecca Turner and Forrest Norvell

174 JSJ npm 3 with Rebecca Turner and Forrest Norvell

Don’t miss out! Sign up for Angular Remote Conf! 02:28 - Forrest Norvell IntroductionTwitter GitHub02:37 - Rebecca Turner IntroductionTwitter GitHub Blog03:05 - Why npm 3 Exists and Changes in npm 2 => 3DebuggingLife Cycle OrderingDeduplication08:36 - Housekeeping09:47 - Peer Dependency ChangesThe Singleton Pattern15:38 - The Rewrite Process and How That Enabled Some of the Changes Coming OutCJ Silverio: Npm registry deep dive @ Oneshot Oslo 22:50 - shrinkwrapping 27:00 - Other Breaking Changes?Permissions30:40 - Tiny Jewels33:24 - Why Rewrite?36:00 - npm’s Focus on the Front EndBower npm Roadmap 42:04 - Transitioning to npm 342:54 - Installing npm 344:11 - Packaging with io.js and Node.js 45:16 - Being in BetaPicks Slack List (Aimee) Perceived Performance Fluent Conf Talks (Aimee) Paul Irish: How Users Perceive the Speed of The Web Keynote @ Fluent 2015 (Aimee) Subsistence Farming (AJ) Developer On Fire Episode 017 - Charles Max Wood - Get Involved and Try New Things (Chuck) Elevator Saga (Chuck) BrazilJS (Forrest) NodeConf Brazil (Forrest) For quick testing: `npm init -y`, configure init (Forrest) Where Can I Put Your Cheese? (Or What to Expect From npm@3) @ Boston Ember, May 2015 (Rebecca) Open Source & Feelings Conference (Rebecca) bugs [npm Documentation] (Rebecca) docs [npm Documentation] (Rebecca) repo [npm Documentation] (Rebecca)Special Guests: Forrest Norvell and Rebecca Turner. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

26 Elo 201556min

173 JSJ Online Learning with Gregg Pollack

173 JSJ Online Learning with Gregg Pollack

Check out Angular Remote Conf! 02:55 - Gregg Pollack IntroductionTwitter GitHubEnvy Labs@envylabsCode School@codeschool  Starter Studio05:19 - Code SchoolRails for ZombiesTry Ruby 06:49 - Course ContentCode School Angular.js CoursesBreaking the Ice with Regular ExpressionsThe Fundamentals of Design09:42 - Plots & Storylines11:40 - Code School vs Pluralsight 14:09 - Structuring CoursesFrontend vs BackendBuilding Blocks of Express.jsReal-Time Web with Node.js  Security & SandboxingabecedaryMocha18:21 - JavaScript.com Try jQuery Contributing to JavaScript.comLet Us KnowTry JavaScriptResources22:47 - Designing Exercises & ChallengesabecedaryChai30:31 - The Future of Online LearningThinkfulBloc.ioAirPairHackHands Smarterer34:01 - Teaching Best PracticesPicks Mr. Robot (Gregg) #ILookLikeAnEngineer (Aimee) Why we Need WebAssembly An Interview with Brendan Eich (Aimee) Raspberry Pi 2 Model B (AJ) Periscope (Chuck)Special Guest: Gregg Pollack. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

19 Elo 201533min

172 JSJ NodeSchool with Jason Rhodes

172 JSJ NodeSchool with Jason Rhodes

Check out Angular Remote Conf! 02:22 - Jason Rhodes IntroductionTwitter GitHub BlogSparkPostNodeSchool@nodeschool GitHub: NodeSchoolcharmCityJS@charmcityjs 03:46 - NodeSchoolJason Rhodes: A Story About NodeSchool and Community Building at CascadiaJS 2014Jason Rhodes: NodeSchool Trying Node AND Contributing @ Empire Node 201406:05 - “Workshopper(s)”07:13 - How Meetups Run (Format), Target Audience11:09 - Pair Programming and Peer Learning14:34 - Starting a NodeSchool Chapter15:53 - Implementing Diversity18:07 - Mentoring and Mentorship20:49 - Time Commitment and Effort24:02 - Appealing to All Experience Levels of Attendees26:48 - The NodeSchool Community30:45 - Being a Member of an Open Source CommunityPicks Better Off Ted (Joe) Cat Exercise Wheel (Aimee) That Conference (Joe) primitive.io (Joe) React Rally (Aimee) Falcor YouTube Playlist (Aimee) javascriptjabber.com/15minutes (Chuck) Entreprogrammers Retreat 2015  (Chuck) Love Letter (Jason) charmCityJS (Jason) Mad Max: Fury Road (Jason)Special Guest: Jason Rhodes. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

12 Elo 201541min

171 JSJ Babel with Sebastian McKenzie

171 JSJ Babel with Sebastian McKenzie

02:28 - Sebastian McKenzie IntroductionTwitter GitHub Blog02:53 - Babel (Pronunciation Clarification)05:56 - HistoryLearn ES2015 - Babel09:14 - The State of Babel09:59 - Babel and the TC39 Process11:54 - Features That Can’t Be TranspiledWeak Maps and Proxies    13:45 - Readability and Performance OutputTraceur18:12 - Plugin Architecture19:58 - ES6/2015 Feature ImplementationBlockscopingLabelsExceptionsDestructuring25:49 - The Birth of Babel26:45 - Babel vs Traceur28:08 - Future Babel FeaturesCode OptimizationMinificationLinting30:15 - The Status of ES2015 and ES201631:01 - Browser Support35:03 - Marketing 35:59 - TypeScript 37:24 - Babel Development and LaborPicks Primitive.io (Joe) Armada: The Novel by Ernest Cline (Joe) How to Win Friends & Influence People by Dale Carnegie (AJ) Web Security Warriors Podcast (AJ) Nodevember (Aimee) The Hitchhiker's Guide to the Galaxy by Douglas Adams (Dave) Yellowstone National Park (Dave) React Rally (Dave) Iterativ: AngularJS Kurs (Chuck) Hire Thom Parkin! (Chuck) The Martian by Andy Weir (Sebastian) Five Guys Burgers and Fries (Sebastian)Special Guest: Sebastian McKenzie . Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

5 Elo 201547min

170 JSJ RabbitMQ with Derick Bailey

170 JSJ RabbitMQ with Derick Bailey

Check out RailsClips!   02:38 - Derick Bailey Introduction Twitter GitHub BlogEntreprogrammers RabbitMQ: Patterns for Applications by Derick Bailey 03:36 - RabbitMQrequest-response Messaging Pattern 05:22 - Synchronous/Asynchronous; Chronological/Non-Chronological 10:33 - Why Do JS Devs Care About RabbitMQ? 12:10 - RabbitMQ and Complexity 14:04 - RabbitMQ’s Model Pub/Sub - RedisEnterprise Integration Patterns: Designing, Building, and Deploying Messaging Solutions by Gregor Hohpe Exchanges, Queues, and Bindings 22:15 - Event Emitters, Organizing Your Code Documentation 31:18 - Service Busses & Monitoring Systems NServiceBus 32:58 - How do you decide you need a messaging system? 36:40 - When Applications Crash… 39:24 - Event Sourcing Kafka 44:05 - Fault Tolerance/Failure Cases “Just let it fail” 50:21 - Putting RabbitMQ in Place SchedulingLong Wait vs Short Wait 58:28 - Formatting Your Messages RabbitMQ: Patterns for Applications by Derick Bailey 01:04:13 - “Saga” (Workflow) 01:05:10 - RabbitMQ For DevelopersUse code JSJABBER for 20% off the bundle! Picks W3Schools (AJ)1984 by George Orwell (AJ) The edit button on the MDN page (AJ)[YouTube] W3Schools is just... Better (AJ)The Go Programming Language (AJ)[YouTube] Go Programming: Learn the Go Programming Language in One Video (AJ)hackthe.computer (AJ)Maze Algorithm (AJ)A* Algorithm (AJ)React Rally (Jamison)Web Design: The First 100 Years (Jamison)Evan Czaplicki: Let's be mainstream! User focused design in Elm @ Curry On Prague 2015 (Jamison)Paracord (Chuck)Soto Pocket Torch (Chuck)Exploring ES6: Upgrade to the next version of JavaScript by Dr. Axel Rauschmayer (Derick)Small World (Derick)Star Wars Darth Bane Trilogy (Derick)LEGO Star Wars The Empire Strikes Back Slave I Set #75060 (Derick)Special Guest: Derick Bailey. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

29 Heinä 20151h 21min

169 JSJ Property-based Testing (QuickCheck) with Zach Kessin

169 JSJ Property-based Testing (QuickCheck) with Zach Kessin

02:20 - Zach Kessin IntroductionTwitter GitHub Zach's BooksParrotJavaScript Jabber: Episode #057: Functional Programming with Zach KessinTesting Erlang With Quickcheck Book04:00 - Mostly Erlang Podcast 05:27 - Property-based Testing (QuickCheck)07:22 - Property-based Testing and Functional Programmingjsverify 09:48 - Pure FunctionsShrinking18:09 - Boundary Cases20:00 - Generating the Data23:23 - Trending Concepts in JavaScript32:33 - How Property-based Testing Fits in with Other Kind of Testing35:57 - Test FailuresPanel Nolan Lawson: Taming the asynchronous beast with ES7 (Aimee) Nodevember (Aimee) Hipster Sound (Jamison) Om Next by David Nolen (Jamison) Gallant - Weight In Gold (Jamison) React Rally (Jamison) Better Off Ted (Joe) Armada: A Novel by Ernest Cline (Joe) Testing Erlang With Quickcheck Book (Zach) Parrot Universal Notification Interface (Zach) The Famine of Men by Richard H. Kessin (Zach)Special Guest: Zach Kessin. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

22 Heinä 201545min

168 JSJ The Future of JavaScript with Jafar Husain

168 JSJ The Future of JavaScript with Jafar Husain

03:04 - Jafar Husain IntroductionTwitter GitHubNetflixTC3903:29 - The Great Name Debate (ES6, ES7 = ES2015, ES2016!!)05:35 - The Release CycleWhat This Means for Browsers08:37 - Babel and ECMAScript 09:50 - WebAssembly 13:01 - Google’s NACL 13:23 - Performance > Features?ES6 Feature Performance (JavaScript Weekly Article) Features Implemented as Polyfills (Why Bother?)20:12 - TC39 24:22 - New FeaturesDecoratorsPerformance Benefit?28:53 -Transpilers34:48 - Object.observe() 37:51 - Immutable Types 45:32 - Structural Types47:11 - Symbols48:58 - Observables52:31 - Async Functionsasyncawait57:31 - Rapid Fire Round - When New Feature Will Be Released in ES2015 or ES2016let - 15for...of - 15modules - 15destructuring - 15promises - 15default function argument expressions - 15asyncawait - 16Picks ES6 and ES7 on The Web Platform Podcast (AJ) Binding to the Cloud with Falcor Jafar Husain (AJ) Asynchronous JavaScript at Netflix by Jafar Husain @ MountainWest Ruby 2014 (AJ) Let's Encrypt on Raspberry Pi (AJ) adventures in haproxy: tcp, tls, https, ssh, openvpn (AJ) Let's Encrypt through HAProxy (AJ) Mandy's Fiancé's Video Game Fund (AJ) The Murray Gell-Mann Amnesia Effect (Dave) The Majority Illusion (Dave) [Egghead.io] Asynchronous Programming: The End of The Loop (Aimee) Study: You Really Can 'Work Smarter, Not Harder' (Aimee) Elm (Jamison) The Katering Show (Jamison) Sharding Tweet (Jamison) The U.S. Women's National Soccer Team (Joe) mdn.io (Joe) Aftershokz AS500 Bluez 2 Open Ear Wireless Stereo Headphones (Chuck) Autonomy, Mastery, Purpose: The Science of What Motivates Us, Animated (Jafar) Netflix (Jafar) quiescent (Jafar) Clojurescript (Jafar)Special Guest: Jafar Husain. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

15 Heinä 20151h 17min

Suosittua kategoriassa Liike-elämä ja talous

sijotuskasti
psykopodiaa-podcast
mimmit-sijoittaa
rss-rahapodi
ostan-asuntoja-podcast
rss-lahtijat
taloudellinen-mielenrauha
io-techin-tekniikkapodcast
oppimisen-psykologia
herrasmieshakkerit
rahapuhetta
hyva-paha-johtaminen
pomojen-suusta
rss-rahamania
inderespodi
rss-h-asselmoilanen
rss-startup-ministerio
rss-pinnan-alle
rss-vaikuttavan-opettajan-vierella
rss-sisalto-kuntoon