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

Avsnitt(735)

031 JSJ history.js

031 JSJ history.js

PanelBenjamin Lupton (twitter github blog) Jamison Dance (twitter github blog) Charles Max Wood (twitter github Teach Me To Code Intro to CoffeeScript) Joe Eames (twitter github blog) Discussion 01:00 - Benjamin Lupton Introduction and Backgroundhistory.js (twitter / github) Front-end and back-end developer Based in Australia Works full-time open-source 03:19 - history.jsHTML5 History API Hashbang 09:26 - URL appearances10:32 - Maintaining states12:23 - (Joe joins the podcast)12:30 - Framework usage13:42 - Overriding history.js17:33 - JavaScript community and evolution21:10 - Particular problems that history.js is geared toward solving22:07 - Sites implementing history.js37signals 25:18 - Other libraries that do the same thing26:12 - Page reloads32:14 - Browser limitations34:37 - Live event in jQuery35:42 - history.js: a deep or shallow library?37:43 - Resources for history.js Picksbooq: Vyper XL2 (Jamison) Jordan Santell (Jamison) Star Wars: Red Harvest (Joe) Nitro Circus: The Movie (Joe) Arrested Development (Joe) f.lux (Chuck) docpad (Benjamin) Paulo Coelho (Benjamin) Transcript BENJAMIN: Anything important, I hear from my wife. So, I could finally have that thing where Facebook doesn’t infiltrate my mind with cat pictures anymore. [This episode is presented to you by ComponentOne, makers of Wijmo. If you need stunning UI elements or awesome graphs and charts, then go to wijmo.com and check them out.][Hosting and bandwidth provided by the Blue Box Group. Check them out at bluebox.net]CHUCK: Hey everybody and welcome to episode 31 of the JavaScript Jabber show. This week on our panel, we have Jamison Dance.JAMISON: Howdy Doody!CHUCK: I'm Charles Max Wood from devchat.tv and this week, we have a special guest and that's Benjamin Lupton.BENJAMIN: Hello.CHUCK: He is the author of history.js and why don’t you introduce yourself? Because that's all I really know about you other than history.js and you are many time zones away.BENJAMIN: [laughs] Yeah. So, I have been doing JavaScript pretty much my entire life and been doing it professionally since about 2006, full time. And over the time, I've developed some open source project. One of them became quite popular and that was History.js it makes HTML5 History API that was compatible with like hashes and things like that. We’ll go into that late. Yeah, that became really popular. Now I other stuff with Node a lot as well.CHUCK: Ooh. A front end and a back end person.BENJAMIN: Only because I'm Node.JAMISON: You are basically like a unicorn.CHUCK: Yeah.JAMISON: You are a mystical creature.CHUCK: You are too well rounded. You are going to put us to shame.BENJAMIN: Well, it’s easier being with Node.CHUCK: Yeah, that's true.JAMISON: Yeah it’s true. Where do you work?BENJAMIN: I work for my own company right now. We’ve been doing JavaScript constancy for a few start-ups in Australia. And now, I'm looking at going completely full time with just the open source stuff.CHUCK: Oh, cool. How do you manage going full time open source?BENJAMIN: Right now, we’ve got premium support. I'm going with a few companies and we are looking into other options as well.CHUCK: Right. Yeah. I'm in the same boat with my podcast. I’d love to go full time podcast and less full time consulting.JAMISON: So the real question is, if I pay you enough money, will you put a gigantic ASCII art picture of my face in the History.js source code?BENJAMIN: Perhaps.JAMISON: Okay. We’ll have to talk after.CHUCK: I’m going to have to figure out how to do that. Let’s see... Image to ASCII art…BENJAMIN: In podcast.CHUCK: Yeah and then I’ll…JAMISON: Oh Chuck, you could do it so there’s face that shows up like in the waveforms on the sounds.CHUCK: [laughs] I don’t know about that.Special Guest: Benjamin Lupton. 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 Okt 201250min

030 JSJ Learning & Teaching JavaScript with Noel Rappin

030 JSJ Learning & Teaching JavaScript with Noel Rappin

PanelNoel Rappin (twitter github blog) Jamison Dance (twitter github blog) Charles Max Wood (twitter github Teach Me To Code Intro to CoffeeScript) AJ O’Neal (twitter github blog) Discussion 00:52 - Works in training and talent development for Groupon00:56 - Author of Rails Test Prescriptions and upcoming Master Space and Time with JavaScript01:21 - Writing a book about JavaScript02:33 - Focus of the bookPart 1: Jasmine and jQuery and the JavaScript Object Model Part 2: Extended examples of jQuery Part 3: Backbone Part 4: Ember 03:46 - Self-published authors05:15 - Approaches and mindsets to learning JavaScript06:04 - “Gotchas!” and bad features in Javascript09:17 - Modeling JavaScript for beginners11:23 - (AJ joins the podcast)11:42 - Resources/Classes for learning JavaScriptGood Parts Book: Douglas Crockford JavaScript Patterns: Stoyan Stefanov Eloquent JavaScript: A Modern Introduction to Programming: Marijn Haverbeke Maintainable JavaScript: Nicholas C. Zakas 13:54 - Hiring people with JavaScript experience at Groupon15:12 - Training workshops17:00 - Getting new hires up to speed quicklyPairing Mentoring Lectures Workshops 21:38 - Book LearningYou can learn at your own pace But it’s hard to ask questions to a book 22:51 - How Noel gained expertise in JavaScript24:38 - Code reading and learning to program a language26:18 - Teaching people JavaScript as their very first language31:55 - Classroom layout33:42 - Online trainingKahn Academy Computer ScienceCode AcademyStarter League40:00 - Finding a mentorStack Overflow PicksShrines by Purity Ring (Jamison) Learnable Programming: Bret Victor (Jamison) Mob Software: Richard P. Gabriel & Ron Goldman (Jamison) Monoprice.com (AJ) ZREO: Zelda Reorchestrated (AJ) The Official Twitter App (Chuck) Fluid App (Chuck) Try Jasmine! (Noel) Justin Searls (Noel) The Atrocity Archives: Charles Stross (Noel) Futurity: A Musical by The Lisps (Noel) Transcript NOEL: I’m trying to figure out where the chat is in this stupid Skype interface.JAMISON: Just imagine the worst place it could possibly be and that’s where it is.[This episode is sponsored by ComponentOne, makers of Wijmo. If you need stunning UI elements or awesome graphs and charts, then go to wijmo.com and check them out.][Hosting and bandwidth provided by The Blue Box Group. Check them out at bluebox.net]CHUCK: Hey everybody and welcome to Episode 30 of the JavaScript Jabber show! This week on our panel we have, Jamison Dance.JAMISON: Hey guys!CHUCK: I’m Charles Max Wood from devchat.tv and this week, we have a special guest and that’s Noel Rappin!NOEL: Hey everybody!CHUCK: For the people who don’t know who you are, you want to introduce yourself, Noel?NOEL:  Sure. I currently work in training and talent development for Groupon. And I am the author of previously “Rails Test Prescriptions” and currently a self-published book called “Master Time and Space with JavaScript”, which you can get at noelrappin.com. I need to spell that out, right? N-o-e-l-r-a-p-p-i-n.comCHUCK: So I’m little curious, before we get into the topic which is learning and teaching JavaScript, how did you get into writing a book about JavaScript? What’s your background there?NOEL: You know, it actually relates to teaching and learning JavaScript. I think, I was like… a lot of long time web devs. I spent my first round as a web consultant in around, turn of the century 2000’s. I spent time trying to talk clients out of JavaScript stuff because it was such a pain in the neck. And I kind of got away from it for awhile and came back a couple of years ago to realize that basically, everything had changed and they were actually usable tools now.And last summer, I was working with a… at that time,Special Guest: Noel Rappin. 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 Okt 201251min

029 JSJ Bower.js with Alex MacCaw and Jacob Thornton

029 JSJ Bower.js with Alex MacCaw and Jacob Thornton

PanelAlex MacCaw (twitter github blog) Jacob Thornton (Fat) (twitter github blog) AJ O’Neal (twitter github blog) Jamison Dance (twitter github blog) Joe Eames (twitter github blog) Charles Max Wood (twitter github Teach Me To Code Intro to CoffeeScript) DiscussionBower.js (web) Bower.js (twitter) Bower.js (github) SXSW Package managers ender-js BPM hem Benefits Small components Yeoman.io Browserify Dependencies Segmenting the community Transports Mozilla (github) Commands Building an actual package manager node.js Moving parts of a package manager Events Challenges Ember.js Mobile web application development Google Chrome apps Desktop apps in JavaScript PicksKershaw Ken Onion Tactical Blur Folding Knife (AJ) The xx: Coexist (Jamison) Neil Armstrong’s Solemn but Not Sad Memorial Cathedral (Jamison) Collective Soul Cat (Jamison) Amazon Prime (Joe) Star Trek Original Series on Amazon Prime (Joe) Functional Programming Principles in Scala: Martin Odersky (Joe) Domo (hiring!) (Joe) Delegation in Google (Chuck) Civilization IV (Chuck) Fujitsu ScanSnap (Chuck) Bill Nye’s Twitter Account getting suspended was not cool (Jacob) Github + Twitter profile redesign (Jacob) Avoid 7/11 Hot Dog Flavored Chips (Jacob) The Big Picture (Alex) CoffeeScriptRedux (Alex) Stripe (Alex) Special Guests: Alex MacCaw and Jacob Thornton. 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 Okt 201247min

028 JSJ Greenfield vs Brownfield Projects

028 JSJ Greenfield vs Brownfield Projects

PanelJoe Eames (twitter github blog) AJ O'Neal (twitter github blog) Jamison Dance (twitter github blog) Charles Max Wood (twitter github Teach Me To Code Rails Summer Camp) DiscussionGreenfield - Brand New Project Brownfield - Older Applications, Legacy Code Poopfield - PHP Development Dealing With Legacy Code Use Tests Working Effectively with Legacy Code - Michael Feathers Risk When is the big rewrite the correct answer? PicksJoseph Smith: Rough Stone Rolling (AJ) Roll Up Crepes (AJ) Calepin (AJ) Bernie (Jamison) Dota 2 (Jamison) Derrick Storm Novels - A Brewing Storm, A Bloody Storm, A Raging Storm (Joe) Castle (Joe) X-Wing Mineatures (Joe) PEX For Fun (Joe) MLG Championship - Starcraft Duel (Joe) VESA 75 to 100 Adapter (Chuck) LG Tone Bluetooth Headphones (Chuck) Transcript JOE: Listen baby, it won’t get weird.JAMISON: [Chuckles]AJ: That sounds... weird.JAMISON: [Chuckles] Too Late.[Hosting and bandwidth provided by the Blue Box Group. Check them out at bluebox.net.][This episode is sponsored by Harvest. I use Harvest to track time, track subcontractor’s time and invoice clients. Their time tracking is really simple and easy to use. Invoicing includes a ‘pay now’ function by credit card and PayPal. And you can sign up at getharvest.com. Use the code RF to get 50% off your first month.]CHUCK: Hey everybody and welcome to episode 28 of the JavaScript Jabber show. This week on our panel, we have AJ O’Neil.AJ: Yo, yo, yo comin’ at you live from the second story of an office base in Orem, Utah.CHUCK:  We also have Jamison Dance.JAMISON: Hi, I’m Jamison Dance and I am super excited, because today iTV just announced that we are doing the Nintendo TV thing; and I haven’t been able to talk about it for, like, six months, so it’s a good day.CHUCK: Cool. We also have Joe Eames.JOE: Comin at you semi live from American Fork, Utah.CHUCK: And I am Charles Max Wood from devchat.tv. Tim is not with us this week because he is in China. I thought I’d point that out, because I think it’s cool. Anyway, this week we are going to be talking about Greenfield versus Brownfield projects. It was kind of funny when we were getting ready to do this, some of the panels were like, Green/Brown?JAMISON: Yeah, I have to pull Josh Susser and ask for a definition.CHUCK: So, as far as I understand it, there are some new --- to this, depending to who you talk to, but mostly, Greenfield is a brand new project with few or no decisions made and no code written for it yet. And Brownfield projects are effectively older applications usually associated with legacy code. You know, so it’s an application that already has code written toward it. Typically, it is out there in the world doing whatever it is supposed to do.JAMISON: Now, I want to put this question delicately. Are there any fecal connotations to the color ‘brown’ in Brownfield?CHUCK: Only if it’s PHP.JOE: [Chuckles]. Then it’s Poopfield Development?CHUCK: [Chuckles]. Okay, we are not gonna go down that tangent.[Laughter]AJ: Because, I mean honestly, when Mormons make jokes about crap, it never sounds good anyway.CHUCK: Yeah. So anyway, how many of you guys have actually worked on a real Greenfield project? Like been there from day one, that you have it just built yourself.JAMISON: I guess it depends on your definition. Maybe. So we have lots of services at ITV, so I've been part of spinning up completely new services that didn’t exist. We had other sort of similar things already, so some of the decisions were already made for, so we kind of had a style established. But it was still like a separate project.AJ: Do you forget us so soon, Jamison?JAMISON: [Chuckles].AJ: You don’t remember ever working here or getting started…JAMISON: I do. I don’t remember Greenfield stuff; I remember new features, I mean, 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.

21 Sep 201214min

027 JSJ The JavaScript Community

027 JSJ The JavaScript Community

The panelists discuss the JavaScript community at large. 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 Sep 201249min

026 JSJ Code Organization and Reuse

026 JSJ Code Organization and Reuse

The panelists talk about code organization and reuse. 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 Aug 201256min

025 JSJ Require.js with James Burke

025 JSJ Require.js with James Burke

The panelists talk to James Burke about Require.js.Special Guest: James Burke . 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.

21 Aug 201235min

024 JSJ Strata.js with Michael Jackson

024 JSJ Strata.js with Michael Jackson

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.

14 Aug 201243min

Populärt inom Business & ekonomi

framgangspodden
badfluence
varvet
rss-jossan-nina
bathina-en-podcast
dynastin
uppgang-och-fall
avanzapodden
rikatillsammans-om-privatekonomi-rikedom-i-livet
rss-borsens-finest
fill-or-kill
rss-placerapodden
svd-tech-brief
rss-svart-marknad
kapitalet-en-podd-om-ekonomi
rss-inga-dumma-fragor-om-pengar
rss-veckans-trade
tabberaset
ekonomiekot-extra
rss-borslunch