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)

167 JSJ TypeScript and Angular with Jonathan Turner and Alex Eagle

167 JSJ TypeScript and Angular with Jonathan Turner and Alex Eagle

02:27 - Alex Eagle IntroductionTwitter GitHubGoogle02:54 - Jonathan Turner IntroductionTwitter GitHubMicrosoft[Talk] Jonathan Turner: TypeScript and Angular 2 @ ng-conf 2015 [Talk] Jonathan Turner: TypeScript and Angular 2 @ Angular U 2015 03:30 - What is TypeScript?04:40 - Google + Microsoft = <3 (Angular Adopting TypeScript)Rob EisenbergAtScriptJonathan Turner: Angular 2: Built on TypeScript07:18 - TypeScript Accommodating AngularTC39Yehuda KatzAurelia 09:28 - Surge of Interest in Adopting a Typechecker, Type System 14:21 - Angular: Creating a New LanguageKilling Off Wasabi - Part 1 (FogBugz Article)traceur16:46 - The Angular 2 Component System and How it Uses New Annotations for Classes18:01 - Annotations and Decorators22:06 - TypeScript and Babel?; Adding New Features25:25 - Non-Angular Users Adopting TypeScriptVisual Studio Code34:55 - Tooling and Setting Modes for Linting and Static Analysis36:58 - Using Libraries Outside the TypeScript Ecosystem38:11 - Type Definition Files40:15 - Content of the Type System43:19 - Duck Typing 45:12 - Getting People to Care about TypeScript 49:16 - The Angular and TypeScript RelationshipPicks f.lux (Aimee) Jafar Husain: Functional Programming in Javascript (learnrx) (Aimee) Startup Timelines (Jamison) Friday Night Lights (Jamison) React Rally (Jamison) Evan Farrer: Unit testing isn't enough. You need static typing too. (Dave) AngularConnect (Joe) ng-click.com (Joe) mdn.io (Joe) Sonic Pi (Chuck) Error Prone (Alex) AudioScope-ng2 (Jonathan) The Nintendo World Championships (Jonathan)Special Guests: Alex Eagle and Jonathan 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.

8 Heinä 20151h 1min

166 JSJ New Relic with Wraithan and Ben Weintraub

166 JSJ New Relic with Wraithan and Ben Weintraub

02:27 - Coding House Scholarship Winners with AJ and AimeeEmily Dreisbach (50% scholarship winner)Blake Gilmore (50% scholarship winner)Berlin Sohn (100% scholarship winner)Congratulations from the panelists of JavaScript Jabber! 09:48 - Ben Weintraub IntroductionTwitter GitHub10:40 - Wraithan IntroductionTwitter GitHub Blog11:01 - Why Care About Monitoring?Insights13:08 - Mixedpanel 13:57 - How it Works on the BackendTime-series DataMySQLstatsdTracesS3CassandraInsights17:26 - New Relic’s CEO: Lew Cirne 18:37 - How the Node Agent WorksExpress.js Specifics    Transactions and Controller NamesDatabase MonitoringMongoDBOracle Support23:27 - Deciding Which Databases to SupportPostgres26:41 - Browser Monitoring32:54 - Using Zombie.js?34:11 - Tree of Causality Track.js 39:37 - Monetizing Aspect, Viewable Source/Source Available Code47:28 - PerformanceCodeGenmraleph Blog v8-perfBenchmarkingjsPerf01:00:53 - New Relic@newrelicNew Relic Blog New Relic Community ForumPicks mraleph Blog (Wraithan) v8-perf (Wraithan) The Dear Hunter: A Night on the Town (Jamison) React Rally (Jamison) caddy (AJ) Windows 10: Setup your Raspberry Pi 2 (AJ) Remote debugging protocol (Ben) Chrome Dev Tools Filmstrip View (Ben)Special Guests: Ben Weintraub and Wraithan . 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.

1 Heinä 20151h 4min

165 JSJ ShopTalk with Chris Coyier and Dave Rupert

165 JSJ ShopTalk with Chris Coyier and Dave Rupert

02:43 - Dave Rupert IntroductionTwitter GitHub BlogParavel03:42 - Chris Coyier IntroductionTwitter GitHub BlogCSS-Tricks CodePen 06:24 - The ShopTalk Show and Podcasting@shoptalkshow“What do I learn next?” => “Just Build Websites!”Question & Answers Aspect23:19 - Tech Is A NichePaul Ford: What is Code? 29:51 - Balancing Technical Content for All Levels of ListenersCommunity Opinion38:42 - Learning New CSS Tricks (Writing Blog Posts)Code Golf41:54 - The Accessibility Project Adventures in Angular Episode #027: Accessibility with Marcy Sutton Anne Gibson: An Alphabet of Accessibility Issues 56:02 - Favorite & Cool EpisodesShowTalk Show Episode #091: with Jamison Dance and Merrick Christensen ShopTalk Show Episode #101: with John ResigShopTalk Show Episode #157: with Alex Russell  ShopTalk Show Episode #147: with Tom Dale ShopTalk Show Episode #123: Special Archive Episode from 2004 ShopTalk Show Episode #166: with Lisa IrishShopTalk Show Episode #161: with Eric Meyer Picks FIFA Women's World Cup (Joe) Winnipeg (Joe) The Martian by Andy Weir (Joe) Zapier (Aimee) SparkPost (Aimee) dev.modern.ie/tools/vms (AJ) remote.modern.ie (AJ) Microsoft Edge (AJ) StarFox Zero for Wii U (AJ) Hot Plate (AJ) untrusted (AJ) Skiplagged (Dave) Judge John Hodgman (Dave) Wayward Pines (Chris) Sturgill Simpson (Chris) The Economic Value of Rapid Response Time (Dave) The Adventure Zone (Dave) React Rally (Jamison) Matsuoka Shuzo: NEVER GIVE UP (Jamison) DESTROY WITH SCIENCE - Quantum Loop (Jamison) Serial Podcast (Chuck) Ruby Remote Conf (Chuck)Special Guests: Chris Coyier and Dave Rupert. 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.

24 Kesä 20151h 15min

164 JSJ Rendr with Spike Brehm

164 JSJ Rendr with Spike Brehm

Get your Ruby Remote Conf tickets and check out the @rubyremoteconf Twitter feed for exciting updates about the conference. 02:22 - Spike Brehm IntroductionTwitter GitHubBlogAirbnb@airbnb@airbnbnerds03:07 - rendr Isomorphic JavaScriptSingle-Page ApplicationRoutes and Controllers06:24 - Why the back and forth between server-side and client-side applications?Rendering Content for SEO (Search Engine Optimization)Spike Brehm: Building Isomorphic Apps @ JSConf.Asia 2014 (Video) Spike Brehm: Building Isomorphic Apps @ JSConf.Asia 2014 (Slides)Spike Brehm: The Evolution of Airbnb's FrontendCaching20:28 - Tools That HelpBrowserifywebpackset-cookie22:21 - Why do this? Who gets statically and dynamically rendered pages?Airbnb Mobile HydrationReactVirtual DOMDiffingDelegation30:26 - DOM and String-based TemplatingHandlebars.jsExpress.jsMounting33:11 - Use CasesMeteorAsana36:08 - Why does Isomorphic JavaScript get so much hate?Charlie Robbins: Scaling Isomorphic Javascript Code Michael Jackson: Universal JavaScriptPicks The Paleolithic Diet (Aimee) Programming Throwdown (Aimee) Listen to other people’s views (Chuck) AJ O'Neal: Access web pages through your home network via SSH (AJ) AJ O'Neal: Reverse VPN: turn any private device into public cloud server (AJ) Alt (Spike) Tame Impala (Spike)Special Guest: Spike Brehm. 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.

17 Kesä 201554min

163 JSJ Flow with Jeff Morrison and Avik Chaudhuri

163 JSJ Flow with Jeff Morrison and Avik Chaudhuri

03:32 - Jeff Morrison IntroductionTwitter GitHubFacebook03:46 - Avik Chaudhuri IntroductionTwitter GitHub LinkedInFacebook04:27 - Flow @flowtype [GitHub] flow05:36 - Static Type CheckingDynamic vs Static Type Languages09:52 - Flow and Unit TestingJest12:39 - Gradual Typing 15:07 - Type Inference 17:50 - Keeping Up with New Features in JavaScriptBabel20:49 - Generators24:46 - Working on Flow28:27 - Flow vs TypeScriptInference SupportTony Hoare: Null References: The Billion Dollar Mistake35:41 - Putting the “Java” Back in JavaScriptServer/Client OverviewPrototyping45:26 - Flow and the JavaScript Community46:43 - React Support48:39 - Documentationgh-pages (link to the docs)IRC Channel for Flow: #flowtype on webchat.freenode.netPicks Nolan Lawson: We have a problem with promises (Aimee) Jim 'N Nick's BBQ Restaurant (Aimee) Frank McSherry: Scalability! But at what COST? (Jamison) Frank McSherry: Bigger data; same laptop (Jamison) Greg Wilson: What We Actually Know About Software Development, and Why We Believe It's True (Jamison) Marron: Time-Travel Debugging for JavaScript/HTML Applications (Jeff) Real World OCaml (Jeff) Muse (Jeff) Shtetl-Optimized (Avik) Chef's Table (Avik)Special Guests: Avik Chaudhuri and Jeff Morrison. 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.

10 Kesä 20151h 2min

162 JSJ ESLint with Jamund Ferguson

162 JSJ ESLint with Jamund Ferguson

02:15 - Jamund Ferguson IntroductionTwitter GitHubBlogPayPalJamund Ferguson: JavaScript Linting for Code Quality & ESLint Overview02:47 - Lint (Background)JSLintDouglas CrockfordJSHintESLint[GitHub] eslintNicholas Zakas[Gitter] eslint04:48 - Keeping ESLint Up-to-date​​Esprima Ariya Hidayatespree Babelbabel-eslintES6 (ECMAScript 6)08:09 - Abstract Syntax Tree (ASTs)Jamund Ferguson: Don’t be scared of abstract syntax trees MinificationUglifyJS13:28 - Using Lint ToolsContext SwitchingAspects to Linting:Code StandardizationCatching Bad MistakesJSCS (JavaScript Code Style)“Extends”20:42 - Are there a downsides to linting?The Social Problem23:40 - Establishing RulesBikesheddingConsistency25:12 - Cool ESLint Featureshandle-callback-errNot Throwing LiteralsNo Restricted ModulesJamund Ferguson: Error Handling in Node.js @ MountainWest JavaScript 2014 30:45 - How ESLint Works Internallyeslint-plugin-angularConfiguration and Defaults40:07 - Getting Started with Linting43:03 - Autofixer 44:41 - Plugins46:47 - Linter Feedback From the PanelPicks Mozilla (AJ) We Will All Be Game Programmers (Aimee) Search Inside Yourself: The Unexpected Path to Achieving Success, Happiness (and World Peace) by Chade-Meng Tan (Aimee) Good Mythical Morning (Dave) Salt Lake City (Dave) BB King Calls This One Of His Best Performances (Jamison) json-server (Jamison) Austenland (Joe) Supergirl (Joe) A Short History of Nearly Everything by Bill Bryson (Jamund) The Book of Mormon (Jamund)     Special Guest: Jamund Ferguson. 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.

3 Kesä 201558min

161 JSJ Rust with David Herman

161 JSJ Rust with David Herman

02:52 - David Herman IntroductionTwitter BlogJavaScript Jabber Episode #54: JavaScript Parsing, ASTs, and Language Grammar w/ David Herman and Ariya HidayatJavaScript Jabber Episode #44: Book Club! Effective JavaScript with David HermanEffective JavaScript by David Herman@effectivejsTC39Mozilla03:50 - The Rust Programming Language[GitHub] rust06:31 - “Systems Programming Without Fear”07:38 - High vs Low-level Programming LanguagesGarbage Collection and DeallocationMemory SafetyPerformance and Control Over Performance11:44 - Stack vs Heap Memory Etymology of "Foo" RAII (Resource Acquisition Is Initialization)16:52 - The Core of RustOwnershipType System24:23 - Segmentation Fault (Seg Faults)27:51 - How much should programmers care about programming languages? Andrew Oppenlander: Rust FFI (Embedding Rust in projects for safe, concurrent, and fast code anywhere.)32:43 - Concurrency and Multithreaded Programming35:06 - Rust vs Go 37:58 - servo 40:27 - asm.jsemscripten42:19 - Cool Apps Built with RustSkylightWit.ai45:04 - What hardware architectures does the Rust target?45:46 - Learning RustRust for Rubyists by Steve KlabnikPicks Software Engineering Radio (Dave) How Will You Measure Your Life? by Clayton M. Christensen (Dave) The Presidents of the United States of America (Dave) Design Patterns in C (AJ) Microsoft Edge Dev Blog: Bringing Asm.js to Chakra and Microsoft Edge (AJ) The Web Platform Podcast: Episode 43: Modern JavaScript with ES6 & ES7 (AJ) Firefox Fame Phone (AJ) iTunes U CS106A (Programming Methodology) (Aimee) Valerian Root on Etsy (Aimee) The Dear Hunter - Live (Jamison) Designing Data-Intensive Applications by Martin Kleppmann (Jamison) Fogus: Perlis Languages (Jamison) Galactic Civilizations III (Joe) Visual Studio Code (Joe) Tessel 2 (Dave) Event Driven: How to Run Memorable Tech Conferences by Leah Silber (Dave) Plush Hello Kitty Doll (Dave)Special Guest: David Herman. 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.

27 Touko 20151h 5min

160 JSJ Stormpath with Robert Damphousse

160 JSJ Stormpath with Robert Damphousse

02:24 - Robert Damphousse Introduction02:40 - OAuthOpenIDJWT07:15 - Stormpath@gostormpath[GitHub] StormpathBlog08:38 - Authorization Information Storage11:29 - Stormpath Authentication vs OAuth AuthenticationResource Owner Password Credentials Grant14:43 - Caching 15:41 - Building Backends as a Service?18:21 - Security19:12 - Using CassandraStormpath in Planet Cassandra: 50k Accounts Imported in Under 200ms20:27 - Use Cases22:27 - Authentication as a Service 23:40 - 2FA (Two Factor Authentication)?24:07 - REST APIsLaunch a SaaS – and Battle Your Robot – With Stormpath25:39 - Making Complete AppsFullContactFirebase26:33 - Security (Cont’d)27:34 - In-Between Layer (Authentication API)28:40 - Browser-Based vs Mobile Application Use29:44 - Angular, React, Flux, 32:02 - React Native?33:05 - Stormpath Life Expectancy35:09 - Customers36:12 - Active Directory, LDAP (Lightweight Directory Access Protocol) 37:05 - Support and PricingPicksPutting the "fun" back in "funeral"! Celebrating the death of old IE browsers on January 12! (Dave) Giant Star Wars LEGO Super Star Destroyer Shattered at 1000 fps | Battle Damage (Dave) GitLab (Dave) Allen Pike: JavaScript Framework Fatigue (Aimee) The Cult of Work You Never Meant to Join (Aimee) Serial (AJ) HotPlate (AJ) Design Patterns in C (AJ) OAuth3 (AJ) JS Remote Conf Videos (Chuck) Ruby Remote Conf (Chuck) Traction: Get a Grip on Your Business by Gino Wickman (Chuck) Startups For the Rest of Us (Chuck) The Guest House: A Poem (Robert) The Hiring Post (Robert) Front-end Job Interview Questions (Robert)Special Guest: Robert Damphousse. 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.

20 Touko 201550min

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