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(735)

151 JSJ Getting Started with a Career in Web Development with Tyler McGinnis

02:21 - Tyler McGinnis IntroductionTwitter GitHub BlogDevMountain Programming Bootcamp@DevMtn Firebase Experts Program03:23 - Getting Started at DevMountainHack ReactorNeedle04:38 - DevMountain ConceptionCahlan Sharp05:37 - How Do I Learn How to Code?Struggle. Fail. Tears.[Confreaks] Tyler McGinnis: What I’ve Learned about Learning from Teaching People to Code08:03 - Resources => Consume ALL THE InformationKatya Eames[YouTube] Katya Eames: How to Teach Angular to your KidsA Smarter Way to Learn JavaScript: The new approach that uses technology to cut your effort in half by Mark Myers11:16 - Two Camps: Art (Creators) and Technicians <= Does DevMountain Cater to One or the Other?13:08 - Repetition as a Way to LearnThe Hard Way Series (Zed Shaw)Follow @lzsthw for book related news, advice, and politeness 15:23 - Letting People Struggle vs Helping Them 17:14 - Training/Finding Instructors / Teaching Teachers to be Better Teachers21:08 - Why Is JavaScript a Good Language to Learn?JSX24:11 - DevMountain Mentors26:30 - Student Success Stories28:56 - Bootcamp Learning EnvironmentsReact Week@reactweekRyan Florence34:11 - Oldest and Youngest Students (Success Stories Cont’d)37:18 - Bootcamp Alumni (Employment Rates and Statistics)Picks Costco Kirkland Brand Peanut Butter Cups (Dave) [Confreaks] Tyler McGinnis: What I’ve Learned about Learning from Teaching People to Code (Dave) [YouTube] Katya Eames: How to Teach Angular to your Kids (Dave) [YouTube] Misko Hevery and Rado Kirov: ng-conf 2015 Keynote 2 (Dave) Mandy’s Fiancé (AJ) [YouTube] Katya Eames: How to Teach Angular to your Kids (Joe) ng-conf Kids (Joe) Salt (Joe) [YouTube] Dave Smith: Angular + React = Speed (Tyler) [YouTube] Igor Minor: (Super)Power Management (Tyler) React.js Newsletter (Tyler) Dave Smith’s addendum to his talk (Joe)Special Guest: Tyler McGinnis. 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.

18 Maalis 201550min

150 JSJ OIMs with Richard Kennard, Geraint Luff, and David Luecke

Check out RailsClips on Kickstarter!! 02:01 - Richard Kennard IntroductionTwitter GitHubKennard ConsultingMetawidget02:04 - Geraint Luff IntroductionTwitter02:07 - David Luecke IntroductionTwitterGitHub02:57 - Object-relational Mapping (ORM)NoSQLDuplication10:57 - Online Interface Mapper (OIM)CRUD (Create, Read, Update, Delete) UI (User Interface)12:53 - How OIMs WorkForm GenerationDynamic GenerationStatic GenerationDuplication of DefinitionsRuntime Generation16:02 - Editing a UI That’s Automatically GeneratedShape Information => Make Obvious Choice23:01 - Why Do We Need These?25:24 - Protocol? Metawidget 27:56 - Plugging Into Frameworksbackbone-formsJSON Schema33:48 - Making Judgement CallsWebComponents, ReactJSON APIAngularJS49:27 - Example OIMsJSON SchemaMetawidgetJsonary 52:08 - TestingPicks The Legend of Zelda: Majora's Mask 3D (AJ) 80/20 Sales and Marketing: The Definitive Guide to Working Less and Making More by Perry Marshall (Chuck) A Wizard of Earthsea by Ursula K. Le Guin (Chuck) Conform: Exposing the Truth About Common Core and Public Education by Glenn Beck (Chuck) Miracles and Massacres: True and Untold Stories of the Making of America by Glenn Beck (Chuck) 3D Modeling (Richard) Blender (Richard) Me3D (Richard) Bandcamp (David) Zones of Thought Series by Vernor Vinge (David) Citizenfour (Geraint) Solar Fields (Geraint) OpenPGP.js (Geraint) forge (Geraint)Special Guests: David Luecke, Geraint Luff, and Richard Kennard. 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.

11 Maalis 20151h 2min

149 JSJ Passenger Enterprise with Node.js with Hongli Lai and Tinco Andringa

Check out RailsClips on Kickstarter!! 02:39 - Hongli Lai IntroductionTwitter GitHub BlogPhusion03:08 - Tinco Andringa IntroductionGitHub03:23 - Phusion Passenger[GitHub] passenger06:13 - Automationnginx08:37 - Parsing HTTP HeadersHooking12:44 - Meteor Support15:37 - Future Added Features?17:12 - Passenger EnterpriseRuby Rogues Episode #143: Passenger Enterprise with Tinco Andringa and Hongli Lai About Phusion Passenger Documentation & Support20:03 - Concurrency and Multithreading MultiprocessingThe Cluster ModuleWebSocketspassenger_sticky_sessions23:33 - Setting Up on a Server for a Node.js ApplicationDebian Packages25:06 - Union Station Monitoring Tool (Union Station Teaser)Introducing Union Station: our web app performance monitoring and behavior analysis service; now in open beta Using Google PolymerJavaScript Jabber Episode #120: Google Polymer with Rob Dodson and Eric BidelmanPolymer vs Facebook ReactPicks Emily Claire Reese: Playing Catch-Up (Jamison) Jason Punyon: Providence: Failure Is Always an Option (Jamison) Active Child: You Are All I See (Jamison) FFmpeg (Chuck) YouTube (Chuck) Developers' Box Club (Chuck) Ruby Remote Conf (Chuck) DevChat.tv Kickstarter (Chuck) Dash (Hongli) In the Balance: An Alternate History of the Second World War by Harry Turtledove (Hongli) phusion-mvc (Tinco) Union Station Teaser (Tinco) Radio 1's Live Lounge (Tinco)Special Guests: Hongli Lai and Tinco Andringa. 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.

4 Maalis 201543min

148 JSJ i.cx and EveryBit.js with Matt Asher and Dann Toliver

02:24 - Dann Toliver IntroductionTwitter GitHub Bento Miso02:35 - Matt Asher IntroductionTwitter GitHub Blog02:51 - EveryBit.js and I.CX[GitHub] everybit.js EveryBit.js Whitepaper 03:43 - ArchitectureEpisode #135: Smallest Federated Wiki with Ward Cunningham06:54 - Sustainability and The Pieces of the SystemContent “Puffs”AuthenticationStorageFirebaseDistributed Hash Table (DHT)The Chord Algorithm (Peer-to-Peer)21:56 - DecentralizationSpace MonkeyMadesafe25:20 - Audience: Why Should I Care?27:38 - Getting Started: Nuts and BoltsFrontend AgnosticStorage and PerformanceUsers and Data ManagementPayload PropertiesMetadataGraph DatabaseAdding New RelationshipsAdding HeuristicsResource Allocator ComponentLocal StorageRAM34:55 - Scaling and Server Cost36:23 - Cloud Storage and Management (Security & Trust)HTTPSSSL ModelGPG Model“Proof of Presence”"Self-verifying"Namecoin Project47:22 - Implementing Cryptographic Primitivesbitcoinjs-lib Key Management CryptographyOAuth55:13 - The Firefox Sync Tool ProjectPicks [Twitch.tv] Kylelandrypiano (Jamison) "Visualizing Persistent Data Structures" by Dann Toliver (Jamison) Probability and Statistics Blog (Jamison) Seeed Studio (Tim) Adafruit Industries (Tim) SparkFun Electronics (Tim) American Sniper by Chris Kyle, Scott McEwen, and Jim DeFelice (Chuck) Introducing Relay and GraphQL (Dann) The Clojurescript Ecosystem (Dann) Read-Eval-Print-λove (Dann) React Native (Matt)Special Guests: Dann Toliver and Matt Asher. 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.

25 Helmi 20151h 5min

147 JSJ io.js with Isaac Schleuter and Mikeal Rogers

The panelists talk to Isaac Schleuter and Mikeal Rogers about io.js.Special Guests: Isaac Schleuter and Mikeal Rogers. 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.

18 Helmi 20152min

146 JSJ React with Christopher Chedeau and Jordan Walke

The panelists talk to Christopher Chedeau and Jordan Walke about React.js Conf and React Native.Special Guests: Christopher Chedeau and Jordan Walke. 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.

11 Helmi 201557min

145 JSJ Meteor.js with Matt DeBergalis

The panelists talk to Matt DeBergalis about Meteor.js.Special Guest: Matt DeBergalis. 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.

4 Helmi 20151h 6min

144 JSJ Marionette.js 2.0 with Sam Saccone

The panelists talk to Sam Saccone about Marionette.js 2.0.Special Guest: Sam Saccone. 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.

28 Tammi 201538min

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ää