RRU 034: “Progressive Web Apps” with Aaron Gustafson / Live at Microsoft Ignite
React Round Up23 Okt 2018

RRU 034: “Progressive Web Apps” with Aaron Gustafson / Live at Microsoft Ignite

Panel:
- https://twitter.com/cmaxw?lang=en
Special Guests: https://github.com/adtm In this episode, the Chuck talks with https://www.aaron-gustafson.com who is a web standards and accessibility advocate working at Microsoft. Aaron and Chuck talk about PWAs and the ins and outs of these progressive web apps. Check out today’s episode to hear more! Show Topics: 0:36 – Chuck: Our guest is Aaron, say HI! 0:41 – Aaron: Hi! I have been working on the web for 20 plus years. I am working on the Edge team for accessibility among other things. I have done every job that you can do on the web. 1:08 – Chuck: That is one of OUR publications? 1:14 – Aaron: No the communities. I joined the staff as editor in chief for 1.5 year now. It’s a nice side project to do. 1:36 – Chuck: I thought it was a commercial thing. 1:40 – Aaron: No it’s volunteer. 1:52 – Chuck: Talk about your web background? 2:02 – Aaron: I remember the first book I got (title mentioned). My first job on the web (cash) I was the content manager in Florida and this was in 1999. Gel Macs just came out. I relocated from FL to CT and worked for other companies. I got into CSS among other things. It’s been a wild ride and done it all. 3:52 – Chuck: Let’s talk about web standards? 4:05 – Aaron: It depends on the organization and what the spec is and where it originates. It’s interesting to see how HTML developed back in the day. When standardization started working then everything started to converge. Everything is a little different now. Some specs come out from companies that... (Apple, https://responsiveimages.org, and Grid are mentioned among other things.) 7:37 – Chuck: We set up to talk about PWAs. Where did PWAs come from? 7:57 – Aaron: Modern web design, best web applications. Being secure. One of the underpinnings came out from Google and they have been supporters of that. Firefox is working on installation as well. The Chrome implementation is weird right now, but it becomes an orphaned app. It’s like the old chrome apps where in Windows you can install from the Microsoft store. But the case of Chrome you don’t have to go through the store. 10:14 – Chuck asks a question. 10:24 – Aaron answers. 11:53 – Chuck: What makes it a progressive web app rather than a regular website? 12:05 – Aaron: The definition is running on HTPS and... Aaron defines the terms that Chuck asks at 11:53. 12:43 – Aaron: Of course you can push forward if it makes sense from the baseline. 12:56 – Chuck: We have an Angular podcast, and we talked about PWAs and nobody had a good definition for it. 13:18 – Aaron. 13:22 – Chuck: What are the pros of having a PWA? Let’s start with the basics first. 13:33 – Aaron: The ability to control how you react to the network. We development is challenging maybe in other areas because of the lack of control and how your code gets to your users. Any special needs that YOU might have. Aaron goes into detail on this topic. 17:14 – Chuck: Is the service worker the star for PWAs? 17:20 – Aaron: In a way, kind of. Aaron goes into detail on this topic. Share 2 is mentioned, too. 19:42 – Chuck: If the service worker intermediates between the browser and the page / Internet would it make sense to have your worker have it load and then load everything else? Cause you have those Web Pack now. 20:14 – Aaron: Some people would consider it but I wouldn’t necessarily. I am not a fan for that. If anything goes wrong then nothing loads. I remember back when... 22:23 – Aaron: That is a lot of overhead. 22:34 – Chuck: I am wondering what is the best practice? How do you decide to pull in a service worker and then move into more complicated issues? 22:53 – https://www.youtube.com/channel/UCDWpGhFB8j6Kia4B_MKUG3w: Progressive Web App where they talk about their evolution about this. 25:17 – https://www.freshbooks.com/?adgroupid=51893696397&ag=%255Bfreshbooks%255D&camp=US%2528SEM%2529Branded%257CEXM&campaignid=717543354&crid=289640536553&dclid=CNGHh6XkmN4CFQO5TwodEqEA2w&dv=c&gclid=EAIaIQobChMIzpSso-SY3gIVDoxpCh0-HwkaEAAYASAAEgI6JfD_BwE&gclsrc=aw.ds&kw=freshbooks&kwid=kwd-298507762065&ntwk=g&ref=ppc-na-fb&source=GOOGLE Code: DEVCHAT. 26:25 – Chuck: In order to be a PWA you don’t need to have a push notification. 26:38 – Aaron: I don’t think anyone would want a push notification from me. 27:12 – Chuck: What features do PWAs have? 27:18 – Aaron: Features? None of them really, other than push notifications, it’s just standard it’s going to make an App feel more App “y”. If that’s something you want to do. It’s up to you to determine that. There is going to be like push notifications – sending person new updates about the order. If you were a new site you want to make sure you are not doing a push notifications on everything cause that would be too much. Exercising care with the capabilities with what the users are doing on your computer. This is a person that you are dealing with. We need to seem less needy. Give users control of how they want to use it. For example, Twitter will give you that control per user. 30:56 – Chuck: Could you also do it for different parts of the page? 31:01 – Aaron: It’s different scopes. Your servicer worker has different scopes and it needs to be in the root folder or the JavaScript folder. You can have different workers but they will come from different scopes. 31:32 – Chuck gives a hypothetical example. 31:50 – You can do a bunch of different service workers. 32:11 – Chuck: This is why we create different hierarchies in our code. 32:26 – Chuck: Is there a good point where people can be more informed with PWAs? 32:40 – Aaron: https://www.pwastats.com and https://twitter.com/pwastats with Cloud 4. 33:22 – Chuck asks a question. 33:26 – Aaron: Yes. If you are a photographer you don’t want to cash all of your photos on someone’s hard drive. We have to be good stewards of what is operating on people’s hard drives. Even something as simple as a blog can benefit from being a PWA. 35:01 – Chuck: Are there new things that are being added to a PWA? 35:12 – Aaron: A new feature is the background sync. Aaron: What is native and what is web? 36:33 – Chuck: Yeah it can detect a feature in your machine. Dark mode is... 36:48 – Aaron: It would be nice to see things standardized across the board. 37:00 – Chuck: How does this play into https://electronjs.org or Android or...? Do those need to be PWAs? 37:16 – Aaron: It depends on what you are building. So I talked with people through Slack and they want total control. If you r desire is to shift the same experience then https://electronjs.org can make a lot of sense. They will have to pay a premium, though, your users. If you are aware of that then go the https://electronjs.org route. But for most cases then https://electronjs.org might be overkill for you. You don’t need that extra overhead. 39:55 – Aaron continues. Aaron: I think the major benefit of PWA is... 41:15 – Chuck: The other angle to that is that in an Electron app does it make sense to use a PWA things? 41:23 – Aaron: Yes that makes sense. 41:34 – Unless for some reason you need to unlock into an older version, which I hope is not the case b/c of security reasons. 41:55 – Aaron continues. 42:34 – Chuck: Where can we find you? 42:35 – Aaron mentions Twitter and other sites. See Links! 43:02 – https://www.digitalocean.com/ Links:
- https://rubyonrails.org
- https://angular.io/guide/quickstart
- https://www.pwastats.com
- https://twitter.com/pwastats
- https://electronjs.org
- https://www.aaron-gustafson.com
- https://www.linkedin.com/in/aarongustafson
- https://twitter.com/AaronGustafson
- https://github.com/aarongustafson
- https://www.youtube.com/channel/UCDWpGhFB8j6Kia4B_MKUG3w
- https://medium.com/@AaronGustafson
- https://devchat.tv/get-a-coder-job/
- https://twitter.com/cmaxw?ref_src=twsrc%255Egoogle%257Ctwcamp%255Eserp%257Ctwgr%255Eauthor
Sponsors:
-

Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Avsnitt(310)

RRU 014: Razzle with Jared Palmer

RRU 014: Razzle with Jared Palmer

Panel: Nader Dabit Special Guests: Jared Palmer In this episode of React Round Up, the panel discusses Razzle and other projects with Jared Palmer. Jared is the lead engineer at The Palmer Group, where he spends his time building apps and services for companies that have been underserved by the recent technological changes. They talk about what Razzle is, the benefit of server-side rendering, and the difficulties he faced putting this project together. They also touch on why he chose to create Razzle and some of his other projects like Backpack and After.js. In particular, we dive pretty deep on: Jared introHow he got into programmingFell into programming by accidentWhat is Razzle?Create React App with server-side renderingGatsbyGoal of RazzleWhat are the benefits of adding server-side rendering?The power of ReactNext.jsReact can hydrate once it renders on the serverRazzle is thin layer around 2 Webpack watch tasksHow do you handle routing?React RouterAfter.jsPerformance pros to server-side renderingIs an app built in Razzle still considered a single-page application?React ResolverWhat were the technical difficulties putting Razzle together?Why made you want to create this?Wanted direct control over the projectBackpackAnd much, much more! Links: The Palmer GroupRazzleCreate React AppGatsbyReactNext.jsWebpackReact RouterAfter.jsReact ResolverBackpackThe Palmer Group GitHubJared’s MediumJared’s GitHub@jaredpalmer Sponsors Kendo UIDigital OceanFreshBooks Picks: Nader Proton Native Jared Guess.jsGardenSpecial Guest: Jared Palmer. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

5 Juni 201848min

RRU 013: Visual Studio Code and the VS Code Azure Extension with Matt Hernandez and Amanda Silver LIVE at Microsoft Build

RRU 013: Visual Studio Code and the VS Code Azure Extension with Matt Hernandez and Amanda Silver LIVE at Microsoft Build

Panel: Charles Max Wood Special Guests: Matt Hernandez and Amanda Silver In this episode, the JavaScript Jabber panelists discuss Visual Studio Code and the VS Code Azure Extension with Matt Hernandez and Amanda Silver at Microsoft Build. Amanda is the director of program management at Microsoft working on Visual Studio and VS Code. Matt works on a mix between the Azure and the VS Code team, where he leads the effort to build the Azure extensions in VS code, trying to bring JavaScript developers to Azure through great experiences in VS Code. They talk about what’s new in VS Code, how the Azure extension works, what log points are, and much more! In particular, we dive pretty deep on: Amanda introMatt introWhat’s new in VS Code?VS Code coreVS Live ShareShared TerminalNow have Linux supportLive Share is now public to the world for freeWhat would you use Shared Terminal for?Are there other things coming up in VS Code?Constantly responding to requests from the communityLive Share works for any languageHow does the Azure extension work?Azure App ServiceStorage extensionAzure Cosmos DBWhat are log points?All a part of a larger plan to create a better experience for JS developersVisual debuggersIs it the same plugin to support everything on Azure?Want to target specific services that node developers will take advantage ofAnd much, much more! Links: Visual StudioVS CodeAzureLive ShareAzure Cosmos DBMicrosoft BuildAzure App ServiceAmanda’s GitHub@amandaksilverMatt’s GitHub@fiveisprime  Picks: Charles Orphan BlackShout out to VS Code teamBattle of the Books  Matt The Customer-Driven Playbook by Travis LowdermilkThe Speed of Trust by Stephen M.R. CoveyYes, And by Kelly LeonardDigital Marketing For Dummies by Ryan DeissEd Gets His Power Back Kickstarter  Amanda Microsoft Quantum Development Kit for Visual Studio CodeIggy Peck, ArchitectTek by Patrick McDonnellSpecial Guests: Amanda Silver and Matt Hernandez. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

29 Maj 201850min

RRU 012: The Future of Higher Order Components and Render Props with Paul Gray

RRU 012: The Future of Higher Order Components and Render Props with Paul Gray

Panel: Nader Dabit Special Guests: Paul Gray In this episode of React Round Up, the panel discusses the future of higher order components and render props with Paul Gray. Paul is a software developer at an educational technology company called Learning Objects. They have a learning platform there that helps instructional designers create better contents. They talk about how he got into programming and React, when you would want to use HOCs and render props, and chainable components. In particular, we dive pretty deep on: Paul introReactHow long have you been working with React?How did you get into programming?TI-89 Calculators in high schoolSoftware engineering degree in collegeBig fan of HOCs when they came outChainable componentsChainable components APIPromisesAnatomy of render prop componentsTypeScriptasync/await GitHub GistUse casesTool to share reusable code in ReactHow long has this been in the works?With StateMappChain functionFunctional ProgrammingFunctional Programming in Scala by Paul ChiusanoAnd much, much more! Links: Learning ObjectsReactChainable componentsTypeScriptasync/await GitHub GistFunctional Programming in Scala by Paul ChiusanoPaul’s GitHubPaulGray.net Picks: Nader Viro ReactExpo blog Paul The Great Interior Design ChallengeLittle Tikes Red CarSpecial Guest: Paul Gray. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

22 Maj 201836min

RRU 011: Simple React Patterns with Lucas Reis

RRU 011: Simple React Patterns with Lucas Reis

Panel: Charles Max WoodCory House Special Guests: Lucas Reis In this episode of React Round Up, the panel discusses simple React patterns with Lucas Reis. Lucas works as a senior front-end developer at Zocdoc and previously worked in Brazil for an ecommerce company called B2W. He recently wrote a blog post about simple React patterns that really took off and became popular on the web. They talk about this blog post, what defines a successful pattern, and then they discuss the different patterns that he has discovered in his years of React programming. In particular, we dive pretty deep on: Lucas introTries to write blog posts as much as possibleSimple React Patterns blog postReactWhat does he mean by “successful” patterns?Three things that define good patternsDefine successful?The mix componentThe Container/Branch/View patternFirst successful pattern he has foundSeparation of concernsCommon concern: are we worried about mixing concerns?If/elseCan you encapsulate in the view?Pattern matchingReact loadableYou need to think of 3 states at leastHigher-order componentRender propsAnd much, much more! Links: ZocdocB2WSimple React Patterns blog postReactSimple Made Easy by Rich HickeyLucas’s GitHubLucas’s Blog@iamlucasreis Picks: Charles FullContactUdemy Cory Fluent confImmer Lucas PercyBe studying the languages and be inspired!Special Guest: Lucas Reis. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

16 Maj 20181h 1min

RRU 010: Best Practices with React and Redux with Samuel Mendenhall

RRU 010: Best Practices with React and Redux with Samuel Mendenhall

Panel: Cory HouseNader Dabit Special Guests: Samuel Mendenhall In this episode of React Round Up, the panel discusses best practices with React and Redux with Samuel Mendenhall. Samuel has been working in web development for the past five years and was recently working for Red Hat. They talk about what has led him to React, as well as some of the most common mistakes that people make in React. They also talk about the amazing power of TypeScript and when you may not want to use Redux. In particular, we dive pretty deep on: Sam introjQuery, Backbone, and AngularReact and React NativeNew role at Microsoft in commercial software engineering groupWorking a lot with React and toolingWhat have you learned since working with React?Shallow learning curveThe concept of React is very simpleWhat work did you do at Red Hat?Internal toolingWhat are some common mistakes people have made in React?Defensive programmingMaking sure functions are bound correctlyHe’s an advocate for using TypeScriptThe pros of using TypeScriptConnect in ReactConnect will do shallow comparisonsReduxWhen you shouldn’t use ReduxWhen should Redux be used in a project?MobXAnd much, much more! Links: jQueryBackboneAngularReactRed HatReact NativeTypeScriptReduxMobX@engineersamwellSam’s GitHub Picks: Cory Transform.now.shPlop js Nader React Amsterdam YouTubeAWS AppSyncAWS Amplify Sam WebpackSpecial Guest: Samuel Mendenhall. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

8 Maj 201851min

RRU 009: Hot Reloading in Create React App with Dave Ceddia

RRU 009: Hot Reloading in Create React App with Dave Ceddia

Panel: Charles Max WoodTara Manicsic Special Guests: Dave Ceddia In this episode of React Round Up, the panel discusses hot reloading with Create React App with Dave Ceddia. Dave is a React developer, blogs about React, and recently wrote a book called Pure React. They talk about what hot reloading is, when you would want to use it, and how you can set it up in your code. They also touch on ways to customize Create React App, the disadvantages to customizing, and the key points to understand about Create React App before modifying it.  In particular, we dive pretty deep on: Dave introWhat is the big picture behind hot module reloading?Create React AppWebpackHow do you set this up?You don’t need to ejectIs there a certain point when you need to start taking advantage of hot reloading?Helps to use hot reloading from the beginningResources to help with using hot reloadingDave articleReact app rewiredAre there any changes you can make that won’t hot reload?Full page refreshesWhy did Create React App not have this from the beginning?Having a skeleton that you can breakWebpack HMR vs React-Hot-Loader by Mark Erikson Event handlersAre there other ways you can customize Create React App?SassKey points to Create React App to understandTry to avoid modifying it if you canAnd much, much more! Links: ReactDave’s BlogPure React by Dave CeddiaCreate React AppWebpackDave articleReact app rewiredWebpack HMR vs React-Hot-Loader by Mark EriksonSass@dceddiaDave’s GitHubDevChat.tv PatreonDaveCeddia.com/RoundUp Picks: Charles Star RealmsVailIf you have an idea about a podcast, he is willing to hear them outJavaScript YouTube videos to come at DevChat.tv YouTube Tara Patreon Dave React BostonIndie HackersSpecial Guest: Dave Ceddia. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

1 Maj 20187min

RRU 008: The Framework Summit with Joe Eames

RRU 008: The Framework Summit with Joe Eames

Panel: Tara ManicsicNader Dabit Special Guests: Joe Eames In this episode of React Round Up, the panel discusses The Framework Summit with Joe Eames. Joe discusses the history behind the conference and how it came to be created. They really wanted to create a conference that would include all of the frameworks, especially those that are underrepresented in the programming community, like React. He touches on why he is passionate about this project, why it is important to be open to learning new things, and the overall format of the conference. In particular, we dive pretty deep on: The Framework SummitOctober 2-3, 2018 in Park City, UtahThe history of the conferenceReact Originally called the “Tri-conference”Frameworks play a major part in your code development“Religiousness” of which framework is the “right” or “wrong” one to useOpportunity to expose more people to new frameworksComparing the frameworksThe importance of being willing to learn new thingsBursting “thought bubbles”Being open to changeMerging communities and creating open dialogueFormat of the conferenceBoth single-track and multi-trackElmVueAngularGreat lineup already and it’s getting betterWebflowNovel and unique talksWhat not to do when submitting talksAnd much, much more! Links: ReactThe Framework SummitElmVueAngularWebflow@FrameworkSummit Picks: Tara Vue VixensngGirls Nader ViroReact Joe The 2018 Web Developer Roadmap by Brandon MorelliRole playing games - My Little PonySpecial Guest: Joe Eames. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

24 Apr 20181h 1min

RRU 007: Breaking up with Higher Order Components with David Atchley

RRU 007: Breaking up with Higher Order Components with David Atchley

Panel: Charles Max WoodNader DabitCory HouseKent C Dodds Special Guests: David Atchley In this episode of React Round Up, the panel discuss breaking up with higher-order components with David Atchley. David has been doing software development for 24 years now and has worked mostly in web development. He has worked at many places from start-ups to large companies and does client work currently for Tandem.ly. They talk about what higher-order components and render props are and when you would want to use them to help you in your code. They also touch on overuse and misuse of applications and coding tools and the difference between using render props and HOCs. In particular, we dive pretty deep on: David introWhat are higher-order components?What are render props?Higher-order components are patterned after higher-order functionsConnect from React ReduxReactWhat are the use cases for higher-order components?ReduxWould you suggest writing a render prop instead in certain situations?Deciding to use a HOC or a render prop depends on the situationThink critically about the applications you are usingKent’s Advanced React Component Patterns Egghead CourseDifference between render props and HOCsBuild an HOC out of a render prop if you want to share codeContext API from ReactConcern with new Context APIProblem with overuseHow do you help people avoid overuse and misuse?Unstated library by James KyleStart developing code at the local levelReact NativeAnd much, much more! Links: Tandem.lyReactReduxKent’s Egghead CourseContext API from ReactUnstated library by James KyleReact NativeDavid’s GitHub@Tuxz0rTandem.ly Medium Picks: Charles I’d Pay You $500,000 a Year, but You Can’t Do the Work by Shelly PalmerLiars by Glenn Beck Cory CodeSandbox LiveBabel replReact Cheat SheetFluent Conf Nader Shoe Dog by Phil KnightNader’s Blog Post Kent Answers to common questions about render props blog postReact’s new Context API blog postReact ComposerBrandon SandersonCodeSandbox Live David React, Inline Functions, and Performance by Ryan FlorenceBuild Better Products by Laura KleinSpecial Guest: David Atchley. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

17 Apr 201812min

Populärt inom Business & ekonomi

framgangspodden
varvet
badfluence
uppgang-och-fall
rss-borsens-finest
svd-ledarredaktionen
avanzapodden
lastbilspodden
rikatillsammans-om-privatekonomi-rikedom-i-livet
fill-or-kill
rss-dagen-med-di
rss-kort-lang-analyspodden-fran-di
affarsvarlden
borsmorgon
dynastin
kapitalet-en-podd-om-ekonomi
tabberaset
montrosepodden
borslunch-2
rss-inga-dumma-fragor-om-pengar