POPULARITY
4 episodes with virtual dom
2 episodes with virtual dom
4 episodes with virtual dom
5 episodes with virtual dom
2 episodes with virtual dom
2 episodes with virtual dom
2 episodes with virtual dom
2 episodes with virtual dom
4 episodes with virtual dom
Ryan Carniato, creator of SolidJS, joins the podcast to reflect on a decade of developing the framework. We dive into the evolution of frontend tooling, the rise of fine-grained reactivity, and why SolidJS continues to challenge virtual DOM conventions. Ryan also shares insights on open source maintenance, web standards, and the future of UI architecture. Links YouTube: https://www.youtube.com/@ryansolid X: https://x.com/ryancarniato Dev.to: https://dev.to/ryansolid SolidJS Website: https://www.solidjs.com Resources A Decade of SolidJS: https://dev.to/this-is-learning/a-decade-of-solidjs-32f4 We want to hear from you! How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend? Let us know by sending an email to our producer, Em, at emily.kochanek@logrocket.com (mailto:emily.kochanek@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod). Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we'll send you free PodRocket stickers! What does LogRocket do? LogRocket provides AI-first session replay and analytics that surfaces the UX and technical issues impacting user experiences. Start understanding where your users are struggling by trying it for free at LogRocket.com. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Ryan Carniato.
Fredrik talks to Evan Czaplicki, creator of Elm about figuring out a good path for yourself. What do you do when you have a job which seems like it would be your dream job, but it turns out to be the wrong thing for you? And how do you escape from that? You can’t put the success of something you build before your own personal and mental health, no matter how right the decision may be for the thing you build. Is there ever a reproducible path? Aren’t most or all successful things in large part a result of their circumstances? Platform languages and productivity languages - which do you prefer? Thoughts on the tradeoffs of when and how to roll things out and when to present ideas. Evan’s development mindset and environment, and the ways it has affected Elm’s design - all the way down to the error messages. Finally, of course, the benefits of country life - out of the radiation of San Francisco. Thank you Cloudnet for sponsoring our VPS! Comments, questions or tips? We a re @kodsnack, @tobiashieta, @oferlund and @bjoreman on Twitter, have a page on Facebook and can be emailed at info@kodsnack.se if you want to write longer. We read everything we receive. If you enjoy Kodsnack we would love a review in iTunes! You can also support the podcast by buying us a coffee (or two!) through Ko-fi. Links Evan Elm Prezi Guido van Rossum Brendan Eich Bjarne Stroustrup Hindley–Milner type inference Gary Bernhardt Talks by Gary SIMD Standard ML Ocaml Haskell Lambda calculus Algebraic data types Type inference Virtual DOM Webbhuset Dart Safari’s no performance regressions rule Sublime text GHC Nano Emacs Titles The personal aspects A culture clash I wasn’t supposed to be here This numb feeling I’ve never really been to the real world Is this even real? The path that Guido did This is you This isn’t for me, and it’s your fault Valuing my own health Reckless indifference A dispute between colleagues A nice solution will come out if you’re patient enough Here’s your error message: good luck Farmer’s disposition These are good years Getting paid in chickens for web development Finding a place
Solid.js is a popular JavaScript framework known for its reactive and efficient rendering system. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Ryan Carniato is the creator of SolidJS, and he joins the show to talk about the framework. Taylor Nodell is a The post SolidJS with Ryan Carniato appeared first on Software Engineering Daily.
Solid.js is a popular JavaScript framework known for its reactive and efficient rendering system. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Ryan Carniato is the creator of SolidJS, and he joins the show to talk about the framework. Taylor Nodell is a The post SolidJS with Ryan Carniato appeared first on Software Engineering Daily.
Is the Virtual DOM Bad? Are keyboard shortcuts important? What is S3 storage? In this potluck episode of Syntax, Wes and Scott answer your questions. Show Notes 00:08 Welcome 01:27 Syntax Brought to you by Sentry.io 02:45 Welcome Randy, our new Producer! Randy's YouTube 04:14 A ‘Canadian Podcast' 04:43 Is Alpine JS or HTMX a replacement for pug or other templating libraries? 08:21 What powers the “in-app” browsers and how can we test our sites on it? Inject tracking code Tauri 13:16 A deep dive on generators and iterators. An Insight into Iteration Protocol through Infinite Scroll in Angular 15:25 Video podcast observations 17:18 PROBLEM I need a way of managing state. 22:34 Why is Virtual Dom (a la React) suddenly bad? 28:31 In a recent episode (659), Wes mentioned he updated the OG image cards, and noticed a higher click through rate. 29:07 Updated logo and monster truck intro. 30:19 Back to OG Images. 31:51 Are “import * as X” exports build stripped? 36:46 What is the difference between S3 storage and a CDN. Backblaze CDN 45:00 How important are keyboard shortcuts or extensions? Are they necessary to be a good developer? 50:04 Sick Picks + Shameless Plugs Sick Picks Scott: Perplexity.ai, Serversideup Wes: Zojirushi Rice Cooker Shameless Plugs Wes: Wes Bos Courses Scott: Sentry Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Randy: YouTube Scott: X Instagram Tiktok LinkedIn Threads
We welcome on Aiden Bai, creator of Million.js, to explain what a virtual DOM is, how Million.js works as a virtual DOM, and how it makes React apps faster. Links https://aidenybai.com https://www.linkedin.com/in/aidenbai https://twitter.com/aidenybai https://github.com/aidenybai https://www.youtube.com/c/AidenBai Case studies for performance impact on business: https://wpostats.com https://web.dev/case-studies Research for the impact of loading speed on conversion rate: https://www.bidnamic.com/en-us/resources/how-website-speed-affects-your-conversion-rates User experience hierarchy (performance on top): https://web.dev/articles/web-performance-made-easy We want to hear from you! How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend? Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod). Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we'll send you free PodRocket stickers! What does LogRocket do? LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Aiden Bai.
Aiden joins us to talk about his project, Million JS, and all the tech he's implementing with it.Show Notes00:00 Intro and Welcome Aiden02:01 Aidens Background 04:36 Expereince With React07:33 Virutal DOM09:57 Sevelte Talk 11:54 Million JS15:51 Representation of Virtual DOM17:39 Block DOM 19:01 Limitations21:18 Static Analysis29:26 Naming MillionJS30:12 Other Frameworks? 33:20 Landing Pages36:14 Marketing Stratedgies 38:27 Teams42:22 What's Next44:37 Picks and Plugs
In this episode of the Modern Web podcast, hosts Rob Ocel and Tracy Lee interview Aiden Bai, the creator of the Million.js library, a replacement for the Virtual DOM implementation in ReactJS. They talk about the process of creating Million.js as a high schooler, how the library speeds up React applications using blocks and the Million Compiler, and what the future of the library looks like. The conversation also touches on the alternative experience and education paths to becoming a developer, as well as the future of open source libraries, venture funded libraries, and indie hacked frameworks. Sponsored by This Dot Labs.
V tomto díle si budeme povídat o: - DOM (main issue: rerendering after every change) - Virtual DOM, Shadow DOM & Incremental DOM - React - Virtual DOM, Vue - Virtual DOM, Angular - Shadow - DOM/Incremental DOM, Svelte/Solid - Precompilation - Angular history = not stable, weird RCs, jump from v1 to v2 => lost most - Dependency Injection - Updates & Security & Performance - Angular on BE = Nest.js
Daryl and Scott interview Clément Olivier, fellow BizApps MVP, and chat about the new XrmToolBox Tool - PCF to BPF. Some of the highlights: Gardening Podcast PCF to BPF How Custom Controls are added to BPF Table FormXml Adding Choices field to Data Step of BPF Crashing the XrmToolBox Worldwide What Clément didn't test Virtual DOM for Fluent What are the bounds on a PCF control in the BPF Clément's Info and other links: https://www.linkedin.com/in/clemolivier @Clement0livier Blog: https://stuffandtacos.azurewebsites.net PCF2BPF: https://github.com/carfup/XTBPlugins.PCF2BPF Buy him a coffee if you appreciate his contribution to the community: https://www.buymeacoffee.com/clementolivier Got questions? Have your own tool you'd like to share? Have a suggestion for a future episode? Contact Daryl and Scott at cast@xrmtoolbox.com. Follow us on LinkedIn and @XrmToolCast for updates on future episodes. Do you want to see us too? Subscribe to our YouTube channel to view the last episodes. Don't forget to rate and leave a review for this show at Podchaser. Your hosts: Daryl LaBar: https://www.linkedin.com/in/daryllabar | @ddlabar Scott Durow: https://www.linkedin.com/in/scottdurow | @ScottDurow Editor: Linn Zaw Win: https://www.linkedin.com/in/linnzawwin | @LinnZawWin Music: https://www.purple-planet.com
This episode is a continuation of Javascript Jabber 512, so head over there before tuning into this one! In this Part 2, the Jabberers and Dan Shappir discuss THE difference between Svelte vs. virtual DOM and React, the most noticeable pros and cons of React when a DOM's around, and how “partial rendering” is changing the game. Per usual, Steve's dad jokes are 100% funny. “This separation that the VDom creates between the representation of the UI and the actual UI is a really powerful one.” - Dan Shappir In This Episode The BIGGEST difference between Svelte and virtual DOM + React (and when to use one or the other) React's noticeable pros and cons when a DOM gets involved (and how much they'll affect your workflow in 2022) What to watch out for in case you get locked into a vendor (and which vendors to consider) How “partial rendering” is changing the game (and created a whole new model where React is the “middleman”) Sponsors Vultr (https://www.vultr.com/jabber/?promo=100FLY14&utm_source=jsjabber&utm_medium=syndication&utm_campaign=q122) Top End Devs (https://topenddevs.com/) Coaching | Top End Devs (https://topenddevs.com/coaching) Picks Aimee- Financial Literacy as a 2022 goal Aimee- GitHub: eyalev/kubectl-context-prompt (https://github.com/eyalev/kubectl-context-prompt) AJ- iOS 6 Apple Maps with Pins AJ- Classless JavaScript - Dec 16, 2021 - Utah Node.jsClassless JavaScript - Dec 16, 2021 - Utah Node.js (https://www.youtube.com/watch?v=-wz2Ued0Zkc&list=PLrPrSDTfMDlpDem7DdJwzBkzza73OtaCn&index=3) AJ- Best Thunderbolt Display / iMac Monitor Alternative (https://coolaj86.com/articles/best-thunderbolt-display-imac-monitor-alternative/) AJ- Creeds of Craftsmanship (https://github.com/BeyondCodeBootcamp/beyondcodebootcamp/issues/18) AJ- webinstall.dev (https://webinstall.dev/) Dan- Molly White on Twitter: my god it's actually happened (https://twitter.com/molly0xFFF/status/1471581442408812545?s=20) Steve- Twitter: Dad Jokes ( @Dadsaysjokes ) (https://twitter.com/Dadsaysjokes) Steve- Everything I googled in a week as a professional software engineer - localghost (https://localghost.dev/2019/09/everything-i-googled-in-a-week-as-a-professional-software-engineer/) Steve- Detailed Footage Finally Reveals What Triggers Lightning | Quanta Magazine (https://www.quantamagazine.org/radio-telescope-reveals-how-lightning-begins-20211220/)
This episode is a continuation of Javascript Jabber 512, so head over there before tuning into this one! In this Part 2, the Jabberers and Dan Shappir discuss THE difference between Svelte vs. virtual DOM and React, the most noticeable pros and cons of React when a DOM's around, and how “partial rendering” is changing the game. Per usual, Steve's dad jokes are 100% funny. “This separation that the VDom creates between the representation of the UI and the actual UI is a really powerful one.” - Dan Shappir In This Episode The BIGGEST difference between Svelte and virtual DOM + React (and when to use one or the other) React's noticeable pros and cons when a DOM gets involved (and how much they'll affect your workflow in 2022) What to watch out for in case you get locked into a vendor (and which vendors to consider) How “partial rendering” is changing the game (and created a whole new model where React is the “middleman”) Sponsors Vultr (https://www.vultr.com/jabber/?promo=100FLY14&utm_source=jsjabber&utm_medium=syndication&utm_campaign=q122) Top End Devs (https://topenddevs.com/) Coaching | Top End Devs (https://topenddevs.com/coaching) Picks Aimee- Financial Literacy as a 2022 goal Aimee- GitHub: eyalev/kubectl-context-prompt (https://github.com/eyalev/kubectl-context-prompt) AJ- iOS 6 Apple Maps with Pins AJ- Classless JavaScript - Dec 16, 2021 - Utah Node.jsClassless JavaScript - Dec 16, 2021 - Utah Node.js (https://www.youtube.com/watch?v=-wz2Ued0Zkc&list=PLrPrSDTfMDlpDem7DdJwzBkzza73OtaCn&index=3) AJ- Best Thunderbolt Display / iMac Monitor Alternative (https://coolaj86.com/articles/best-thunderbolt-display-imac-monitor-alternative/) AJ- Creeds of Craftsmanship (https://github.com/BeyondCodeBootcamp/beyondcodebootcamp/issues/18) AJ- webinstall.dev (https://webinstall.dev/) Dan- Molly White on Twitter: my god it's actually happened (https://twitter.com/molly0xFFF/status/1471581442408812545?s=20) Steve- Twitter: Dad Jokes ( @Dadsaysjokes ) (https://twitter.com/Dadsaysjokes) Steve- Everything I googled in a week as a professional software engineer - localghost (https://localghost.dev/2019/09/everything-i-googled-in-a-week-as-a-professional-software-engineer/) Steve- Detailed Footage Finally Reveals What Triggers Lightning | Quanta Magazine (https://www.quantamagazine.org/radio-telescope-reveals-how-lightning-begins-20211220/)
Allen Wyma talks with Julius Lungys, contributor to Yew. Contributing to Rustacean Station Rustacean Station is a community project; get in touch with us if you'd like to suggest an idea for an episode or offer your services as a host or audio editor! Twitter: @rustaceanfm Discord: Rustacean Station Github: @rustacean-station Email: hello@rustacean-station.org Timestamps [@1:29] - Core values and benefits of Yew [@3:32] - The performance of Yew [@6:57] - Cargo workspaces [@8:05] - Trunk & Wasm-pack [@10:07] - Virtual DOM & Debugging [@11:24] - Source Maps in Yew [@12:21] - Krustlet [@13:34] - Reasons to choose Wasm over JavaScript [@15:26] - Ecosystem of Yew [@16:32] - Glue package [@21:32] - How Yew relates to Elm [@22:32] - Functional Components [@25:05] - Server Side Rendering (SSR) [@26:52] - When should you consider Yew [@34:24] - TypeScript [@38:46] - Is Yew limited to the browser? [@39:56] - Electron [@41:03] - Yew's browser support [@44:14] - Tips for beginners from Julius Other Resources Julius's Github The Company (Nikulipe) Credits Intro Theme: Aerocity Audio Editing: Plangora Hosting Infrastructure: Jon Gjengset Show Notes: Plangora Hosts: Allen Wyma
Dan Shappir takes the lead in explaining React's core design, and how it's enabled by the Virtual DOM (VDOM). The panel discusses what the VDOM is, and how it differs from the actual browser DOM. Also how React leverages the VDOM and its reconciliation mechanism. Understanding these concepts is important in order to properly understand and make the best use of React. Panel AJ O'NealCharles Max WoodDan ShappirSteve Edwards Sponsors Top End DevsCoaching | Top End Devs Picks AJ- Jordan Walke - React to the Future - YouTubeAJ- Tribal LeadershipAJ- The Innovator's SolutionAJ- A Meditation for Healthful SleepAJ- CreedsOfCraftsmanship.comCharles- AntibioticsCharles- Podcast | Top End DevsCharles- Author | Top End DevsDan- Typing the Technical Interview in TypeScriptSteve- Random Phrase Generator
Dan Shappir takes the lead in explaining React's core design, and how it's enabled by the Virtual DOM (VDOM). The panel discusses what the VDOM is, and how it differs from the actual browser DOM. Also how React leverages the VDOM and its reconciliation mechanism. Understanding these concepts is important in order to properly understand and make the best use of React. Panel AJ O'NealCharles Max WoodDan ShappirSteve Edwards Sponsors Top End DevsCoaching | Top End Devs Picks AJ- Jordan Walke - React to the Future - YouTubeAJ- Tribal LeadershipAJ- The Innovator's SolutionAJ- A Meditation for Healthful SleepAJ- CreedsOfCraftsmanship.comCharles- AntibioticsCharles- Podcast | Top End DevsCharles- Author | Top End DevsDan- Typing the Technical Interview in TypeScriptSteve- Random Phrase Generator
Ty Overby is a programmer in Jane Street's web platform group where he works on Bonsai, our OCaml library for building interactive browser-based UI. In this episode, Ty and Ron consider the functional approach to building user interfaces. They also discuss Ty's programming roots in Neopets, what development features they crave on the web, the unfairly maligned CSS, and why Excel is “arguably the greatest programming language ever developed.”You can find the transcript for this episode on our website.Some links to topics that came up in the discussion:Jane Street's Bonsai libraryThe 3D design system OpenSCADMatt Keeter's libfive design toolsTry .NET in-browser replJane Street's Incr_dom libraryThe Elm Architecture “pattern for architecting interactive programs”React JavaScript libraryThe Houdini proposalSvelte UI toolkit
Vijay talks about general web UI programming and advent of React and Virtual DOM ఉపయోక్త మాధ్యమాలు , రియక్ట్ ఆగమనం ఇత్యాది విషయాల చర్చ
In this Hasty Treat, Scott and Wes launch a new series called Git the Latest — New Things In Tech. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what's happening with your code, track errors and monitor performance with Sentry. Sentry's Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 03:47 - GitHub CoPilot AI-powered autocompletion Not going to take your job 07:18 - Next.js 11 Image updates Multiplayer 08:20 - Astro Build faster websites with less client-side JavaScript 09:50 - Notion API Get database Query database Pages Block children 11:27 - Petite Vue Petite Vue is an alternative distribution of Vue optimized for progressive enhancement Similar to Alpine.js Without a build step 13:58 - Stackblitz Node in the browser Not in the cloud Rolled 15:22 - Solid.js Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead, it opts to compile its templates down to real DOM nodes and wrap updates in fine-grained reactions. This way when your state updates only the code that depends on it runs. 16:37 - Stately From the company that made xState 18:05 - Web3 Let us know if you want a show about it Ethereum JavaScript API Apps that run on the Blockchain Links https://alpinejs.dev/ https://svelte.dev/ https://xstate.js.org/ Tweet us your tasty treats! Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets
In the third episode of the Delicious Brain Waves podcast, Brad talks to Ian Jones about why the WP Offload Media plugin's UI is being rebuilt using Svelte. They discuss why WP Offload Media needs a UI refresh, why Svelte was picked over other frameworks such as React, Vue or Elm, and how it's going. Show Notes: WP Offload Media SvelteJS Rich Harris - Rethinking reactivity - YouTube Vue vs React: Which is the Best JavaScript Framework in 2020? Virtual DOM is pure overhead Let us know your thoughts on Twitter
In the third episode of the Delicious Brain Waves podcast, Brad talks to Ian Jones about why the WP Offload Media plugin's UI is being rebuilt using Svelte. They discuss why WP Offload Media needs a UI refresh, why Svelte was picked over other frameworks such as React, Vue or Elm, and how it's going. Show Notes: WP Offload Media SvelteJS Rich Harris - Rethinking reactivity - YouTube Vue vs React: Which is the Best JavaScript Framework in 2020? Virtual DOM is pure overhead Let us know your thoughts on Twitter
Добрый день уважаемые слушатели. Представляем новый выпуск подкаста RWpod. В этом выпуске: Ruby Stimulus 2.0.0 The 2020 Ruby Advent Calendar 2020 How to Make Your Code Reviewer Fall in Love with You Why you shouldn’t inherit from Ruby’s core classes (and what to do instead) Rutie - the tie between Ruby and Rust OmniAuth::Apple - OmniAuth strategy for Sign In with Apple Rubyfu, where Ruby goes evil Web Snowpack v3.0 No One Ever Got Fired for Choosing React Puppeteer vs Selenium vs Playwright, a speed comparison Incremental vs Virtual DOM Lots of Ways to Use Math.random() in JavaScript JavaScript Algorithms and Data Structures WMR - the tiny all-in-one development tool for modern web apps Firetable - Excel/Google Sheets like UI for Firebase/Firestore
En este episodio expandimos continuamos con el tema del Document Object Model. Esta vez hablamos del virtual DOM y como éste no es lo mismo que el Shadow DOM. Si desean mayores detalles sobre el tema, aquí les dejamos algunos enlaces relacionados: The difference between Virtual DOM and DOM https://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/ Shadow DOM != Virtual DOM https://develoger.com/shadow-dom-virtual-dom-889bf78ce701 What’s The Deal With Vue’s Virtual DOM? https://vuejsdevelopers.com/2017/02/21/vue-js-virtual-dom/ React: The Virtual DOM | Codecademy https://www.codecademy.com/articles/react-virtual-dom What is Virtual Dom - Tony Freed - Medium https://medium.com/@tony_freed/what-is-virtual-dom-c0ec6d6a925c What is the difference between DOM and Virtual DOM? https://www.devwrites.com/what-is-the-difference-between-dom-and-virtual-dom/ No olviden subscribirse a nuestro canal de YouTube y seguirnos en Instagram y Twitter: YouTube: https://www.youtube.com/channel/UCM7c4hwn-BZT67chRgpkCNg Instagram: @SeHablaCodigo Twitter: @SeHablaCodigo David Kontorovsky en Twitter: @dkvsky --- Send in a voice message: https://anchor.fm/sehablacodigo/message
In this episode, I have a conversation with Johan Li, a Senior Developer at Collegial, all about React JS and how developers can use it to speed up their front end development. ******************************* Questions Asked ******************************* Tell us about your background. How did you get into React? What is React? What is the difference between a framework and a library? What does it mean when a framework is opinionated? Is React opinionated? Explain the difference between Vue, Angular and React. Why choose react over Vue or Angular? What about React Native and React VR? What's the minimum knowledge a web developer needs to get into React VR? Does React support TypeScript? What are some of React's challenges? What are isomorphic apps? What is Next.JS? How do you implement Next.JS in your React project? What are React components? Explain the React component lifecycle. What is state in React? What's the difference between stateless and statefull components? What kind of support does React offer for APIs? Does React support GraphQL? What is JSX? Can you use JSX to create components? What is Babel? What is the DOM? What is the Virtual DOM and what is the difference between it and the DOM? Is the virtual DOM ever out of sync with the real DOM? What are events in React? What are handlers in React? What is Redux? What is a React router?
In this episode of GeeksBlabla we discuss, React, How to get started ,Core concepts, React Ecosystem and a lot of topics around it. Guests Yassine ElOuafi Youssouf EL Azizi Amine Hakkou Notes 0:00 - Introduction and welcoming 0:05 - What is React? && React History. 0:09 - How is React different from other solution such as jquery/angular and Vuejs 0:19 - Imperative and Declarative in React? 0:22 - What do I need To know to start working with React? 0:31 - React Fundamental : JSX. 0:38 - Deference between JSX and template system. 0:41 - React Fundamental : Components, State, Props. 0:48 - React Patterns: HOC, render props, Compound components 0:52 - State Management Approaches. 1:03 - React and Typescript. 1:12 - Redux-saga vs Redux-thunk 1:14 - React Fiber, Virtual Dom, Reconciliation, concurrent mode. 1:34 - React Suspense && algebraic effects. 1:48 - Preact. 1:58 - WebAssembly and React. 2:04 - Styling in React. 2:08 - Server side Rendering with React. 2:12 - Meta-frameworks : Next.js / Gatsby. 2:25 - React Testing. 2:33 - Tools and Resources. Links React Yassine Blog Kent C. Dodds React Testing Library The Beginner's Guide to React Prepared and Presented by : Soufian El Foukahi Youssouf EL Azizi
In deze aflevering bespreken we de drie populairste JavaScript front-end frameworks van dit moment. We kijken naar de voordelen van elk framework en bespreken de nadelen. Ook kijken we naar een nieuw en opkomend framework genaamd svelte die het anders doet als de rest door geen virtual dom te gebruiken.Bronnen:https://merehead.com/blog/angular-vs-react-vs-vue-2020/ https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/ https://medium.com/@patricianeil248/react-vs-vue-which-is-better-for-2020-c484f22c67a8https://dev.to/jesseskinner/svelte-is-the-most-beautiful-web-framework-i-ve-ever-seen-325f https://dev.to/richharris/why-i-don-t-use-web-components-2cia Playwright:https://github.com/microsoft/playwright Istio(Service Mesh):https://istio.io/Kiali:https://kiali.io/Nuxt.js:https://nuxtjs.org/Svelte:https://svelte.dev/
Появление движка для рендеринга Ivy и развитие Incremental DOM натолкнуло нас на тему нового выпуска Argumentarium. Сегодня обсуждаем Virtual DOM и Incremental DOM на примере React и Angular. Сегодня у нас в гостях Рустам Имайкин, в прошлом фулстэк разработчик, ныне Angular фанатик, который превращает все что можно в Angular (https://github.com/irustm) вещает актуальные темы про Angular в https://t.me/ngFanatic и https://twitter.com/irustm Telegram—канал CSSSR: https://t.me/csssr Twitter CSSSR: https://twitter.com/csssr_dev Telegram редакции: https://t.me/Vindizh Twitter редакции: https://twitter.com/Vindizh
E' proprio quando si pensa di aver raggiunto il max che nascono le innovazioni, a questo punto Nella storia entra in scena Richard Harries, graphic editor al New York Times, è il 2019 e presenta l'ultima scintillante, snella e stilosa novità nel mondo dei framework js. Svelte il non frameworke da event driven user interface, passando per le state driven user interface, si arriva alla reactive way.Se volessimo riassumere svelte diremmo che non è un framework ma un compilatore, che opera in modo chirurgico sul dom senza passaggi intermedi e che è pensato per essere reattivo.#Note dell'episodiohttps://svelte.dev/https://www.youtube.com/watch?v=-DX3vJiqxm4https://www.youtube.com/watch?v=qqt6YxAZoOc&t=1011shttps://www.youtube.com/watch?v=AdNJ3fydeaohttps://www.reddit.com/r/sveltejs/comments/ddn98d/what_is_sveltes_underlying_dom_manipulation/https://www.mikenikles.com/blog/why-i-moved-from-react-to-svelte-and-why-others-will-follow/https://sveltejobs.dev/jobs/apple-senior-front-end-developer
#691 (https://github.com/kentcdodds/ama/issues/691)
A 39. adásban kisorsoltuk előző játékunk nyerteseit, és ennek kapcsán a virtual DOM-ról beszélgettünk egy kicsit. Az adatbiztonság, jelszószinkronizálás volt még téma. Valamint a frontend fejlesztéshez szükséges kiegészítő eszközök állítgatására fordított idő és a fejlesztés arányáról elmélkedtünk. Résztvevők: Edu Róka Tibi Github SponsorsResize ObserverFirefox 67: Dark Mode CSS, WebRender, and moreIntroducing the first Microsoft Edge […]
Sponsors Sentry use the code "devchat" for $100 credit Angular Bootcamp TripleByte Panel Charles Max Wood John Papa Ward Bell Joined by Special Guests: Uri Shaked and Netta Bondi Episode Summary Netta is a senior web developer at a startup called Reali, although her degree is in social work. She also co-founded the largest community of women in research and Development in Israel. Netta and Uri are here to talk more about the talk they gave at FrontEnd Con about Angular Ivy and React Fiber. They share how this talk came to be. Uri and Netta compare Angular Ivy and React Fiber, which take different approaches to managing the cycle of code. The panel discusses whether or not there is an advantage to digging into the framework. Netta and Uri talk about some of the processes they explored while investigating Angular Ivy and React Fiber. They share techniques for not getting lost in the source code and delve into some of the differences between Angular Ivy and React Fiber. Through their investigations, they learned that the primary difference between the two is in the event delegation pattern. They advise that when deciding which technology to use, companies should consider which one will be easier to hire new employees for. The panel discusses whether or not big tree frameworks have become a commodity. Most new frameworks focus on making builds smaller and faster, but they would like new frameworks to have more benefits than just speed. The show is finished by Uri and Netta sharing how to track features down in Angular Ivy and React Fiber. Links Angular Ivy React Fiber Virtual DOM Incremental DOM Ajax jQuery Lin Clark - A Cartoon Intro to Fiber - React Conf 2017 Netta Bondy & Uri Shaked - React Fiber vs. Angular Ivy / FRONTEND CON 2018 Follow DevChat on Facebook and Twitter Picks Charles Max Wood: Package Thief vs. Glitter Bomb Trap Help Charles move Devchat from WordPress to Eleventy and get an hour of coaching. Write show notes for 3 episodes and tag it, Charles will do an hour of coaching with you. John Papa: NG Atlanta Ward Bell: BlacKkKlansmen Uri Shaked: NG Atlanta Why We Sleep Uri is on Twitter as @UriShaked and github (urish) Netta Bondi: Hassan Minaj: Homecoming King Iliza Shlesinger: Elder Millennial Netta is on Medium and Twitter (@_bondit_)
Sponsors Sentry use the code "devchat" for $100 credit Angular Bootcamp TripleByte Panel Charles Max Wood John Papa Ward Bell Joined by Special Guests: Uri Shaked and Netta Bondi Episode Summary Netta is a senior web developer at a startup called Reali, although her degree is in social work. She also co-founded the largest community of women in research and Development in Israel. Netta and Uri are here to talk more about the talk they gave at FrontEnd Con about Angular Ivy and React Fiber. They share how this talk came to be. Uri and Netta compare Angular Ivy and React Fiber, which take different approaches to managing the cycle of code. The panel discusses whether or not there is an advantage to digging into the framework. Netta and Uri talk about some of the processes they explored while investigating Angular Ivy and React Fiber. They share techniques for not getting lost in the source code and delve into some of the differences between Angular Ivy and React Fiber. Through their investigations, they learned that the primary difference between the two is in the event delegation pattern. They advise that when deciding which technology to use, companies should consider which one will be easier to hire new employees for. The panel discusses whether or not big tree frameworks have become a commodity. Most new frameworks focus on making builds smaller and faster, but they would like new frameworks to have more benefits than just speed. The show is finished by Uri and Netta sharing how to track features down in Angular Ivy and React Fiber. Links Angular Ivy React Fiber Virtual DOM Incremental DOM Ajax jQuery Lin Clark - A Cartoon Intro to Fiber - React Conf 2017 Netta Bondy & Uri Shaked - React Fiber vs. Angular Ivy / FRONTEND CON 2018 Follow DevChat on Facebook and Twitter Picks Charles Max Wood: Package Thief vs. Glitter Bomb Trap Help Charles move Devchat from WordPress to Eleventy and get an hour of coaching. Write show notes for 3 episodes and tag it, Charles will do an hour of coaching with you. John Papa: NG Atlanta Ward Bell: BlacKkKlansmen Uri Shaked: NG Atlanta Why We Sleep Uri is on Twitter as @UriShaked and github (urish) Netta Bondi: Hassan Minaj: Homecoming King Iliza Shlesinger: Elder Millennial Netta is on Medium and Twitter (@_bondit_)
Sponsors Sentry use the code "devchat" for $100 credit Angular Bootcamp TripleByte Panel Charles Max Wood John Papa Ward Bell Joined by Special Guests: Uri Shaked and Netta Bondi Episode Summary Netta is a senior web developer at a startup called Reali, although her degree is in social work. She also co-founded the largest community of women in research and Development in Israel. Netta and Uri are here to talk more about the talk they gave at FrontEnd Con about Angular Ivy and React Fiber. They share how this talk came to be. Uri and Netta compare Angular Ivy and React Fiber, which take different approaches to managing the cycle of code. The panel discusses whether or not there is an advantage to digging into the framework. Netta and Uri talk about some of the processes they explored while investigating Angular Ivy and React Fiber. They share techniques for not getting lost in the source code and delve into some of the differences between Angular Ivy and React Fiber. Through their investigations, they learned that the primary difference between the two is in the event delegation pattern. They advise that when deciding which technology to use, companies should consider which one will be easier to hire new employees for. The panel discusses whether or not big tree frameworks have become a commodity. Most new frameworks focus on making builds smaller and faster, but they would like new frameworks to have more benefits than just speed. The show is finished by Uri and Netta sharing how to track features down in Angular Ivy and React Fiber. Links Angular Ivy React Fiber Virtual DOM Incremental DOM Ajax jQuery Lin Clark - A Cartoon Intro to Fiber - React Conf 2017 Netta Bondy & Uri Shaked - React Fiber vs. Angular Ivy / FRONTEND CON 2018 Follow DevChat on Facebook and Twitter Picks Charles Max Wood: Package Thief vs. Glitter Bomb Trap Help Charles move Devchat from WordPress to Eleventy and get an hour of coaching. Write show notes for 3 episodes and tag it, Charles will do an hour of coaching with you. John Papa: NG Atlanta Ward Bell: BlacKkKlansmen Uri Shaked: NG Atlanta Why We Sleep Uri is on Twitter as @UriShaked and github (urish) Netta Bondi: Hassan Minaj: Homecoming King Iliza Shlesinger: Elder Millennial Netta is on Medium and Twitter (@_bondit_)
Vue Mastery Black Friday, Vue Toronto slides, New Connect.Tech Vue talks, Evan You previews Vue, Nuxt v2.3.1, Vue Roadtrip Berlin + Vue Vixens, Computed Properties, Using Redux + Vue, adding Vuejs to an existing project, Nuxt.js fundamentals, offline-first Vue apps, and Patching the Vue.js Virtual DOM.
Добрый день уважаемые слушатели. Представляем новый выпуск подкаста RWpod. В этом выпуске: Ruby What's new in Ruby 2.6? и How fast is Ruby 2.5, 2.6 and 2.6 –jit in generating Prawn PDFs Ruby memory, ActiveRecord and Draper и WebpackerCli - bringing the power of Webpacker to any web framework JavaScript The State of JavaScript 2018, Google to pay JavaScript frameworks to implement performance-first code и The Virtual DOM is slow. Meet the Memoized DOM. TensorSpace - a neural network 3D visualization framework built by TensorFlow.js, Three.js and Tween.js, Slate - a completely customizable framework for building rich text editors и NearDB - simple document db made for globally distributed reads
Panel: Lucas Reis Justin Bennett Special Guests: Alexey Ivanov and Andy Barnov In this episode, the panelists talk with Alexey Ivanov and Andy Barnov. They all discuss Alexey’s article titled: “Optimizing React Virtual DOM.” Listen to today’s episode to hear all the details about this article, the guests’ backgrounds and much, much more! Show Topics: 0:32 – Panel: Thanks for joining us and talking about this article. 0:52 – Guest: Thanks for having us on your podcast! The guest talks about his community of developers and the offices are in San Francisco, Russia and other places. He talks about how the company helps their customers and how they can scale. Some of their companies are Groupon and Ebay. 2:39 – Alexey. 3:09 – Panel: The article is here. What is JSX how does it boil down to? It’s all supposed to help people and help them understand. 3:45 – Alexey: It’s about how to structure your state, etc. 4:15 – Panel: This keeps things small. He said when I have one idea I write a song and when I have 2 ideas I write 2 songs. If you try to put too many ideas into one post it maybe won’t go too far. 4:48 – Alexey. 5:50 – Panel. 5:56 – Panel: That’s a topic for another episode. The article is interesting in that the large percentage don’t think about rendering performance, so it’s a needed piece of content. Let’s talk about – what is the React Virtual DOM? 6:32 – Alexey goes into detail with his answer to the panelist’s question. 8:50 – Panel: What I like about this article is that you go through a good progression: here is the JSX that you would write and here is the trans piled function is. And you show the virtual DOM pre-presentation is. I think that is a helpful thing. Let’s talk about that. How does React change to those things when it’s rendering? 9:50 – Alexey. 12:58 – Panel: Okay to recap...when you are rendering an element you write some JSX and the first thing (component) that will map over to the type property is for the Virtual DOM object? And then all of that is compared – when does that happen, the comparison? 13:28 – Alexey: You have React and you create... 15:20 – Panel: So it’s both React and set state these are the only 2 things that triggered state or is there anything else out there? 15:31 – Alexey. 15:47 – Panel: Interesting. You talked about the imperative way we did it before – and it’s much simpler to say what you want, but a question is that is there any world case where it does not work well? What are the trade-offs? Have you ever encountered one? 16:34 – Alexey: If you have changes in the browse, implementations...it’s simplest and easiest way. You just need to have some little changes... 17:53 – Panel: If it’s basic then you don’t have to do manual updates. 18:03 – Alexey. Alexey: To make it work you need competence in your bundle. 18:36 – Panel: I’ve heard – haven’t worked with – when we have these projects that are really web time based, hundreds of elements in real time on a screen, on a Virtual DOM it’s too slow. You have to be precise. They had performance issues, I’m sure 98.99% of the applications probably perform better with the Virtual DOM. 19:46 – Alexey. 21:38 – Panel: That is to reduce the amount of state changes so you are reducing the amount of time it renders – right? 21:50 – Alexey. 22:03 – FRESH BOOKS! 23:11 – Panel: We talked about how type is the first thing that is checked. It does equal comparison to compare these types. What was really interesting is that class components are the same thing but not so. Is it always going to re-render for those components? 24:24 – Alexey: We have to talk about 2 things about this first. In my article... 27:49 – Panel: That is a beneficial tool too to control your rendering. You talked about tools to show updates and we will include the link to the article in the links, also I would read it and check out that particular function. It’s cool to see HOW it’s actually rendering. 28:29 – Panel: Apparently sometimes things help us in principle cause we need performance. We need to open the tools and understand what is happening? Is it really a bottleneck like I think it is? One of those Twitter things I saw a few months ago... 30:52 – Alexey: Yes, do what makes sense to you at the time. 32:08 – Panel: We talked about render performance and the pure component and not creating functions...you have a big quote in your article... I have a big question for me: You have a component, and there is a child / parent component. I am curious about that pattern – will it re-render every time? Tell us your thoughts, please. 33:16 – Alexey. 34:11 – Panel: My only issue with the render props is not a performance issue it’s more of an architectural issue. Sometimes we want things to be interjected. I want to have access to this or that. Sometimes we want to access those on a life cycle. The higher the component makes it easier to add a... That’s my only complaint about render comps. 35:35 – Alexey. 36:00 – Panel: Like composing consumers? 36:06 – Alexey: What we are talking about is... 37:00 – Panel: I agree. There are some interesting cases with that pattern when you have a lot of those chained together – function, function, etc. – there are some components that will help you compose... 37:34 – Panel: It’s like callback hell all over again. Everything is a tradeoff somewhere. After the tree it looks clean with render props. I like it even with the drawbacks. 38:25 – Panel: You spent some time talking about lists of children and how you (if one of the children are removed) then it ends up re rendering all the children cause it’s comparing their positions. You mentioned key is one way to deal with that. Let’s talk about keys. When people use keys they are using an array of an index. It seems like it defeats the purpose of it – is that right? 39:20 – Alexey: Yes, you are right. 40:19 – Panel: I think that continually and it’s a smaller known thing but people want this key error to go away and they just shove something in there. To some extent it’s good to know if your tool requires something it’s good to know WHY it requires that. 40:52 – Panel: Last question. Is that the person to program and be a web developer and they are learning React. This is the tool and they are learning how to use React for an app then when we are throwing articles at them. If they are learning React and these articles are at them I think it’s a cognitive overload. What are your thoughts / advice? 42:07 – Guest: How beginner should you be before you learn React? Ideally you should be aware of JavaScript, right? Sometimes people do this to catch up to something shiny. This is just my 2 cents. 43:03 – Alexey. 44:49 – Panel: When you are going to hire someone to do something or choose a framework always try to do a little bit of work without it. Try to build an application w/o React, and then React is introduced to you, you will only see the benefits that they are brining. One thing that happens inside the React world is that people don’t write an application... Start with the basic building blocks – that makes sense to me. 46:05 – Panel: Let’s go to picks! 46:13 – Advertisement – Get A Coder Job! Links: Ruby on Rails Angular JavaScript Elm Phoenix GitHub React: The Virtual DOM Elixir and Phoenix Bootcamp Alexey Ivanov’s Twitter Andy Barnov’s Twitter Rob Pike’s YouTube Video Understanding Comics Understanding Comics – Book Get A Coder Job Charles Max Wood’s Twitter Sponsors: Get a Coder Job Cache Fly Fresh Books Kendo UI Picks: Lucas Check your room for sound Andy Go Programming Language Alexey Understanding comics Justin The Complete Elixir and Phoenix Bootcamp
Panel: Lucas Reis Justin Bennett Special Guests: Alexey Ivanov and Andy Barnov In this episode, the panelists talk with Alexey Ivanov and Andy Barnov. They all discuss Alexey’s article titled: “Optimizing React Virtual DOM.” Listen to today’s episode to hear all the details about this article, the guests’ backgrounds and much, much more! Show Topics: 0:32 – Panel: Thanks for joining us and talking about this article. 0:52 – Guest: Thanks for having us on your podcast! The guest talks about his community of developers and the offices are in San Francisco, Russia and other places. He talks about how the company helps their customers and how they can scale. Some of their companies are Groupon and Ebay. 2:39 – Alexey. 3:09 – Panel: The article is here. What is JSX how does it boil down to? It’s all supposed to help people and help them understand. 3:45 – Alexey: It’s about how to structure your state, etc. 4:15 – Panel: This keeps things small. He said when I have one idea I write a song and when I have 2 ideas I write 2 songs. If you try to put too many ideas into one post it maybe won’t go too far. 4:48 – Alexey. 5:50 – Panel. 5:56 – Panel: That’s a topic for another episode. The article is interesting in that the large percentage don’t think about rendering performance, so it’s a needed piece of content. Let’s talk about – what is the React Virtual DOM? 6:32 – Alexey goes into detail with his answer to the panelist’s question. 8:50 – Panel: What I like about this article is that you go through a good progression: here is the JSX that you would write and here is the trans piled function is. And you show the virtual DOM pre-presentation is. I think that is a helpful thing. Let’s talk about that. How does React change to those things when it’s rendering? 9:50 – Alexey. 12:58 – Panel: Okay to recap...when you are rendering an element you write some JSX and the first thing (component) that will map over to the type property is for the Virtual DOM object? And then all of that is compared – when does that happen, the comparison? 13:28 – Alexey: You have React and you create... 15:20 – Panel: So it’s both React and set state these are the only 2 things that triggered state or is there anything else out there? 15:31 – Alexey. 15:47 – Panel: Interesting. You talked about the imperative way we did it before – and it’s much simpler to say what you want, but a question is that is there any world case where it does not work well? What are the trade-offs? Have you ever encountered one? 16:34 – Alexey: If you have changes in the browse, implementations...it’s simplest and easiest way. You just need to have some little changes... 17:53 – Panel: If it’s basic then you don’t have to do manual updates. 18:03 – Alexey. Alexey: To make it work you need competence in your bundle. 18:36 – Panel: I’ve heard – haven’t worked with – when we have these projects that are really web time based, hundreds of elements in real time on a screen, on a Virtual DOM it’s too slow. You have to be precise. They had performance issues, I’m sure 98.99% of the applications probably perform better with the Virtual DOM. 19:46 – Alexey. 21:38 – Panel: That is to reduce the amount of state changes so you are reducing the amount of time it renders – right? 21:50 – Alexey. 22:03 – FRESH BOOKS! 23:11 – Panel: We talked about how type is the first thing that is checked. It does equal comparison to compare these types. What was really interesting is that class components are the same thing but not so. Is it always going to re-render for those components? 24:24 – Alexey: We have to talk about 2 things about this first. In my article... 27:49 – Panel: That is a beneficial tool too to control your rendering. You talked about tools to show updates and we will include the link to the article in the links, also I would read it and check out that particular function. It’s cool to see HOW it’s actually rendering. 28:29 – Panel: Apparently sometimes things help us in principle cause we need performance. We need to open the tools and understand what is happening? Is it really a bottleneck like I think it is? One of those Twitter things I saw a few months ago... 30:52 – Alexey: Yes, do what makes sense to you at the time. 32:08 – Panel: We talked about render performance and the pure component and not creating functions...you have a big quote in your article... I have a big question for me: You have a component, and there is a child / parent component. I am curious about that pattern – will it re-render every time? Tell us your thoughts, please. 33:16 – Alexey. 34:11 – Panel: My only issue with the render props is not a performance issue it’s more of an architectural issue. Sometimes we want things to be interjected. I want to have access to this or that. Sometimes we want to access those on a life cycle. The higher the component makes it easier to add a... That’s my only complaint about render comps. 35:35 – Alexey. 36:00 – Panel: Like composing consumers? 36:06 – Alexey: What we are talking about is... 37:00 – Panel: I agree. There are some interesting cases with that pattern when you have a lot of those chained together – function, function, etc. – there are some components that will help you compose... 37:34 – Panel: It’s like callback hell all over again. Everything is a tradeoff somewhere. After the tree it looks clean with render props. I like it even with the drawbacks. 38:25 – Panel: You spent some time talking about lists of children and how you (if one of the children are removed) then it ends up re rendering all the children cause it’s comparing their positions. You mentioned key is one way to deal with that. Let’s talk about keys. When people use keys they are using an array of an index. It seems like it defeats the purpose of it – is that right? 39:20 – Alexey: Yes, you are right. 40:19 – Panel: I think that continually and it’s a smaller known thing but people want this key error to go away and they just shove something in there. To some extent it’s good to know if your tool requires something it’s good to know WHY it requires that. 40:52 – Panel: Last question. Is that the person to program and be a web developer and they are learning React. This is the tool and they are learning how to use React for an app then when we are throwing articles at them. If they are learning React and these articles are at them I think it’s a cognitive overload. What are your thoughts / advice? 42:07 – Guest: How beginner should you be before you learn React? Ideally you should be aware of JavaScript, right? Sometimes people do this to catch up to something shiny. This is just my 2 cents. 43:03 – Alexey. 44:49 – Panel: When you are going to hire someone to do something or choose a framework always try to do a little bit of work without it. Try to build an application w/o React, and then React is introduced to you, you will only see the benefits that they are brining. One thing that happens inside the React world is that people don’t write an application... Start with the basic building blocks – that makes sense to me. 46:05 – Panel: Let’s go to picks! 46:13 – Advertisement – Get A Coder Job! Links: Ruby on Rails Angular JavaScript Elm Phoenix GitHub React: The Virtual DOM Elixir and Phoenix Bootcamp Alexey Ivanov’s Twitter Andy Barnov’s Twitter Rob Pike’s YouTube Video Understanding Comics Understanding Comics – Book Get A Coder Job Charles Max Wood’s Twitter Sponsors: Get a Coder Job Cache Fly Fresh Books Kendo UI Picks: Lucas Check your room for sound Andy Go Programming Language Alexey Understanding comics Justin The Complete Elixir and Phoenix Bootcamp
While Chris is away Wes joins Mike to chat FOSS Burnout & the dark side of open source communities. Plus, we continue to react to React's recent license change, debate about the Virtual DOM & explain why React Native's license might be more important.
Pete Shearer (aka Pete on Software) is building with React and Redux. Show Notes: Redux-synapse React SPA - Single Page Application XML literals in VB.NET StackOverflow thread about Virtual DOM & React Redux Redux has bindings for Angular, Vue, and Aurelia Flux MobX Ember, Backbone, Knockout, jQuery Some concepts you'll need to learn React: NPM, Webpack, Minify, Lint Create-react-app Web Bos - React for Beginners Steven Grider - Modern React with Redux Cory House - Pluralsight Pete mentioned underscore, but he meant to say lodash. I was on two episodes of Pete's podcast: Aspect Oriented Programming with Matthew Groves Matthew Groves on Couchbase Pete Shearer is on Twitter. Want to be on the next episode? You can! All you need is the willingness to talk about something technical. Theme music is "Crosscutting Concerns" by The Dirty Truckers, check out their music on Amazon or iTunes.
JSJ 277: Dojo 2 with Dylan Schiemann and Kitson Kelly This episode of JavaScript Jabber features panelists Aimee Knight, Cory House, and Charles Max Wood. They talk with Dylan Schiemann and Kitson Kelly about Dojo 2. [00:02:03] Introduction to Dylan Schiemann Dylan is the CEO at Sitepen and co-founder of the Dojo Toolkit. [00:02:22] Introduction to Kitson Kitson is the CTO at Sitepen and project lead for Dojo 2. [00:02:43] Elevator Pitch for Dojo Dojo 1 has been around forever. Started back in 2004 as a way to solve the challenge of "I want to build something cool in a browser." Promises and web components were inspired by or created by Dojo. It's been a huge influence on the web development community. Dojo 2 is a ground up re-write with ES 2015, TypeScript and modern API's. It's a modernized framework for Enterprise applications. [00:04:29] How is Dojo different from other frameworks? There's a spectrum: small libraries like React with an ecosystem and community of things you add to it to Angular which is closer to the MV* framework with bi-directional data binding. Vue lands somewhere in the middle. Dojo 2 is also somewhere in the middle as well. It's written in TypeScript and has embraced the TypeScript experience. [00:06:00] Did the Angular 2 move influence the Dojo 2 development and vice-versa? Dojo 2 had moved to TypeScript and 2 days later Angular announced that they were going to TypeScript. Angular also moved very quickly through their BETA phase, which caused some challenges for the Angular community. With Dojo 2, they didn't start the public discussion and BETA until they knew much better what was and wasn't going to change. They've also been talking about Dojo 2 for 6 or 7 years. The update was held up by adoption of ES6 and other technologies. Dojo 1 was also responsible for a lot of the low-level underpinning that Angular didn't have to innovate on. Dojo 2 was built around a mature understanding of how web applications are built now. People doing Enterprise need a little more help and assistance from their framework. Dojo provides a much more feature rich set of capabilities. Angular could have pushed much more of TypeScript's power through to the developer experience. Dojo much more fully adopts it. It's also easier if all of your packages have the same version number. Call out to Angular 4 vs Angular 2. [00:12:44] AMD Modules Why use AMD instead of ES6 modules? You can use both. Dojo 2 was involved in the creation of UMD. James Burke created UMD while working on Dojo. ES6 modules and module loading systems weren't entirely baked when Dojo 2 started to reach maturity, so they went with UMD. It's only been a few months since Safari implemented the ES6 module system. Firefox and friends are still playing catchup. The Dojo CLI build tool uses webpack, so it's mostly invisible at this point. So, at this point, should I be using UMD modules? or ES6? Is there an advantage to using AMD? With TypeScript you'd use ES6 modules, but UMD modules can be loaded on the fly. [00:16:00] Are you using Grunt? Internally, for tasks we use Grunt. But for users, we have a CLI tool that wraps around Webpack. For package builds and CI, Grunt is used. [00:18:30] What is the focus on Enterprise all about? There are a lot of different challenges and complexities to building Enterprise apps. Dojo was the first framework with internationalization, large data grids, SVG charts, etc. Dojo has spend a long time getting this right. Many other systems don't handle all the edge cases. Internationalization in Angular 2 or 4 seems unfinished. Most Dojo users are building for enterprises like banks and using the features that handle large amounts of data and handle those use cases better. [00:21:05] If most application frameworks have the features you listed, is there a set of problems it excels at? The Dojo team had a hard look at whether there was a need for their framework since many frameworks allow you to build great applications. Do we want to invest into something like this? React has internationalization libraries. But you'll spend a lot of time deciding which library to use and how well it'll integrate with everything else. A tradeoff in decision fatigue. In the Enterprise, development isn't sexy. It's necessary and wants to use boring but reliable technology. They like to throw bodies at a problem and that requires reliable frameworks with easily understood decision points. Producing code right is a strong case for TypeScript and they pull that through to the end user. Many frameworks start solving a small set of problems, become popular, and then bolt on what they need to solve everything else... Dojo tried to make sure it had the entire package in a clear, easy to use way. You can build great apps with most of the big frameworks out there. Dojo has been doing this for long enough that they know where to optimize for maintainability and performance. [00:29:00] Where is Dojo's sweet spot? The Sitepen Blog series on picking a framework The biggest reason for using Dojo over the years is the data grid component. They also claim to have the best TypeScript web development experience. You may also want a component based system with the composition hassles of React. The composability of components where one team may write components that another uses is a big thing in Dojo where one person doesn't know the entire app you're working on. Theming systems is another selling point for Dojo. [00:34:10] Ending the framework wars Try Dojo out and try out the grid component and then export it to your Angular or React app. There are a lot of frameworks out there that do a great job for the people who use them. The focus is on how to build applications better, rather than beating out the competition. Sitepen has build apps with Dojo 2, Angular, React, Dojo + Redux, etc. [00:39:01] The Virtual DOM used by Dojo 2 years ago or so they were looking for a Virtual DOM library that was small and written in TypeScript. They settled on Maquette. The more you deal with the DOM directly, the more complex your components and libraries become. Makes things simpler for cases like server side rendering getting fleshed out in BETA 3. It also allows you to move toward something like React Native and WebVR components that aren't coupled to the DOM. They moved away from RxJS because they only wanted observables and shimmed in (or polyfilled) the ES-Next implementation instead of getting the rest of the RxJS that they're not using. [00:46:40] What's coming next? They're finishing Dojo 2. They're polishing the system for build UI components and architecture and structuring the app. They plan to release before the end of the year. They're also wrapping up development on the Data Grid, which only renders what shows on the screen plus a little instead of millions of rows. [00:49:08] Testing They've got intern. It pulls together unit testing, functional testing, continuous integration hooks, accessibility testing, etc. It's rewritten in TypeScript to take advantage of modern JavaScript. The Dojo CLI uses intern as the default test framework. Kitson build the test-extras library to help with Dojo testing with intern. Dojo Links dojo.io github.com/dojo/meta sitepen.com/blog gitter channel github.com/dylans twitter.com/dylans twitter.com/sitepen twitter.com/dojo github.com/kitsonk twitter.com/kitsonk Picks Cory Amateur vs Professional Aimee DevFest Florida (use code 'jsjabber') Chuck Taking some time off AudioTechnica ATR2100 How to define your life purpose in 5 minutes Dylan zenhub HalfStack Conference How to choose a framework series on the Sitepen Blog Kitson Dunbar Number
JSJ 277: Dojo 2 with Dylan Schiemann and Kitson Kelly This episode of JavaScript Jabber features panelists Aimee Knight, Cory House, and Charles Max Wood. They talk with Dylan Schiemann and Kitson Kelly about Dojo 2. [00:02:03] Introduction to Dylan Schiemann Dylan is the CEO at Sitepen and co-founder of the Dojo Toolkit. [00:02:22] Introduction to Kitson Kitson is the CTO at Sitepen and project lead for Dojo 2. [00:02:43] Elevator Pitch for Dojo Dojo 1 has been around forever. Started back in 2004 as a way to solve the challenge of "I want to build something cool in a browser." Promises and web components were inspired by or created by Dojo. It's been a huge influence on the web development community. Dojo 2 is a ground up re-write with ES 2015, TypeScript and modern API's. It's a modernized framework for Enterprise applications. [00:04:29] How is Dojo different from other frameworks? There's a spectrum: small libraries like React with an ecosystem and community of things you add to it to Angular which is closer to the MV* framework with bi-directional data binding. Vue lands somewhere in the middle. Dojo 2 is also somewhere in the middle as well. It's written in TypeScript and has embraced the TypeScript experience. [00:06:00] Did the Angular 2 move influence the Dojo 2 development and vice-versa? Dojo 2 had moved to TypeScript and 2 days later Angular announced that they were going to TypeScript. Angular also moved very quickly through their BETA phase, which caused some challenges for the Angular community. With Dojo 2, they didn't start the public discussion and BETA until they knew much better what was and wasn't going to change. They've also been talking about Dojo 2 for 6 or 7 years. The update was held up by adoption of ES6 and other technologies. Dojo 1 was also responsible for a lot of the low-level underpinning that Angular didn't have to innovate on. Dojo 2 was built around a mature understanding of how web applications are built now. People doing Enterprise need a little more help and assistance from their framework. Dojo provides a much more feature rich set of capabilities. Angular could have pushed much more of TypeScript's power through to the developer experience. Dojo much more fully adopts it. It's also easier if all of your packages have the same version number. Call out to Angular 4 vs Angular 2. [00:12:44] AMD Modules Why use AMD instead of ES6 modules? You can use both. Dojo 2 was involved in the creation of UMD. James Burke created UMD while working on Dojo. ES6 modules and module loading systems weren't entirely baked when Dojo 2 started to reach maturity, so they went with UMD. It's only been a few months since Safari implemented the ES6 module system. Firefox and friends are still playing catchup. The Dojo CLI build tool uses webpack, so it's mostly invisible at this point. So, at this point, should I be using UMD modules? or ES6? Is there an advantage to using AMD? With TypeScript you'd use ES6 modules, but UMD modules can be loaded on the fly. [00:16:00] Are you using Grunt? Internally, for tasks we use Grunt. But for users, we have a CLI tool that wraps around Webpack. For package builds and CI, Grunt is used. [00:18:30] What is the focus on Enterprise all about? There are a lot of different challenges and complexities to building Enterprise apps. Dojo was the first framework with internationalization, large data grids, SVG charts, etc. Dojo has spend a long time getting this right. Many other systems don't handle all the edge cases. Internationalization in Angular 2 or 4 seems unfinished. Most Dojo users are building for enterprises like banks and using the features that handle large amounts of data and handle those use cases better. [00:21:05] If most application frameworks have the features you listed, is there a set of problems it excels at? The Dojo team had a hard look at whether there was a need for their framework since many frameworks allow you to build great applications. Do we want to invest into something like this? React has internationalization libraries. But you'll spend a lot of time deciding which library to use and how well it'll integrate with everything else. A tradeoff in decision fatigue. In the Enterprise, development isn't sexy. It's necessary and wants to use boring but reliable technology. They like to throw bodies at a problem and that requires reliable frameworks with easily understood decision points. Producing code right is a strong case for TypeScript and they pull that through to the end user. Many frameworks start solving a small set of problems, become popular, and then bolt on what they need to solve everything else... Dojo tried to make sure it had the entire package in a clear, easy to use way. You can build great apps with most of the big frameworks out there. Dojo has been doing this for long enough that they know where to optimize for maintainability and performance. [00:29:00] Where is Dojo's sweet spot? The Sitepen Blog series on picking a framework The biggest reason for using Dojo over the years is the data grid component. They also claim to have the best TypeScript web development experience. You may also want a component based system with the composition hassles of React. The composability of components where one team may write components that another uses is a big thing in Dojo where one person doesn't know the entire app you're working on. Theming systems is another selling point for Dojo. [00:34:10] Ending the framework wars Try Dojo out and try out the grid component and then export it to your Angular or React app. There are a lot of frameworks out there that do a great job for the people who use them. The focus is on how to build applications better, rather than beating out the competition. Sitepen has build apps with Dojo 2, Angular, React, Dojo + Redux, etc. [00:39:01] The Virtual DOM used by Dojo 2 years ago or so they were looking for a Virtual DOM library that was small and written in TypeScript. They settled on Maquette. The more you deal with the DOM directly, the more complex your components and libraries become. Makes things simpler for cases like server side rendering getting fleshed out in BETA 3. It also allows you to move toward something like React Native and WebVR components that aren't coupled to the DOM. They moved away from RxJS because they only wanted observables and shimmed in (or polyfilled) the ES-Next implementation instead of getting the rest of the RxJS that they're not using. [00:46:40] What's coming next? They're finishing Dojo 2. They're polishing the system for build UI components and architecture and structuring the app. They plan to release before the end of the year. They're also wrapping up development on the Data Grid, which only renders what shows on the screen plus a little instead of millions of rows. [00:49:08] Testing They've got intern. It pulls together unit testing, functional testing, continuous integration hooks, accessibility testing, etc. It's rewritten in TypeScript to take advantage of modern JavaScript. The Dojo CLI uses intern as the default test framework. Kitson build the test-extras library to help with Dojo testing with intern. Dojo Links dojo.io github.com/dojo/meta sitepen.com/blog gitter channel github.com/dylans twitter.com/dylans twitter.com/sitepen twitter.com/dojo github.com/kitsonk twitter.com/kitsonk Picks Cory Amateur vs Professional Aimee DevFest Florida (use code 'jsjabber') Chuck Taking some time off AudioTechnica ATR2100 How to define your life purpose in 5 minutes Dylan zenhub HalfStack Conference How to choose a framework series on the Sitepen Blog Kitson Dunbar Number
JSJ 277: Dojo 2 with Dylan Schiemann and Kitson Kelly This episode of JavaScript Jabber features panelists Aimee Knight, Cory House, and Charles Max Wood. They talk with Dylan Schiemann and Kitson Kelly about Dojo 2. [00:02:03] Introduction to Dylan Schiemann Dylan is the CEO at Sitepen and co-founder of the Dojo Toolkit. [00:02:22] Introduction to Kitson Kitson is the CTO at Sitepen and project lead for Dojo 2. [00:02:43] Elevator Pitch for Dojo Dojo 1 has been around forever. Started back in 2004 as a way to solve the challenge of "I want to build something cool in a browser." Promises and web components were inspired by or created by Dojo. It's been a huge influence on the web development community. Dojo 2 is a ground up re-write with ES 2015, TypeScript and modern API's. It's a modernized framework for Enterprise applications. [00:04:29] How is Dojo different from other frameworks? There's a spectrum: small libraries like React with an ecosystem and community of things you add to it to Angular which is closer to the MV* framework with bi-directional data binding. Vue lands somewhere in the middle. Dojo 2 is also somewhere in the middle as well. It's written in TypeScript and has embraced the TypeScript experience. [00:06:00] Did the Angular 2 move influence the Dojo 2 development and vice-versa? Dojo 2 had moved to TypeScript and 2 days later Angular announced that they were going to TypeScript. Angular also moved very quickly through their BETA phase, which caused some challenges for the Angular community. With Dojo 2, they didn't start the public discussion and BETA until they knew much better what was and wasn't going to change. They've also been talking about Dojo 2 for 6 or 7 years. The update was held up by adoption of ES6 and other technologies. Dojo 1 was also responsible for a lot of the low-level underpinning that Angular didn't have to innovate on. Dojo 2 was built around a mature understanding of how web applications are built now. People doing Enterprise need a little more help and assistance from their framework. Dojo provides a much more feature rich set of capabilities. Angular could have pushed much more of TypeScript's power through to the developer experience. Dojo much more fully adopts it. It's also easier if all of your packages have the same version number. Call out to Angular 4 vs Angular 2. [00:12:44] AMD Modules Why use AMD instead of ES6 modules? You can use both. Dojo 2 was involved in the creation of UMD. James Burke created UMD while working on Dojo. ES6 modules and module loading systems weren't entirely baked when Dojo 2 started to reach maturity, so they went with UMD. It's only been a few months since Safari implemented the ES6 module system. Firefox and friends are still playing catchup. The Dojo CLI build tool uses webpack, so it's mostly invisible at this point. So, at this point, should I be using UMD modules? or ES6? Is there an advantage to using AMD? With TypeScript you'd use ES6 modules, but UMD modules can be loaded on the fly. [00:16:00] Are you using Grunt? Internally, for tasks we use Grunt. But for users, we have a CLI tool that wraps around Webpack. For package builds and CI, Grunt is used. [00:18:30] What is the focus on Enterprise all about? There are a lot of different challenges and complexities to building Enterprise apps. Dojo was the first framework with internationalization, large data grids, SVG charts, etc. Dojo has spend a long time getting this right. Many other systems don't handle all the edge cases. Internationalization in Angular 2 or 4 seems unfinished. Most Dojo users are building for enterprises like banks and using the features that handle large amounts of data and handle those use cases better. [00:21:05] If most application frameworks have the features you listed, is there a set of problems it excels at? The Dojo team had a hard look at whether there was a need for their framework since many frameworks allow you to build great applications. Do we want to invest into something like this? React has internationalization libraries. But you'll spend a lot of time deciding which library to use and how well it'll integrate with everything else. A tradeoff in decision fatigue. In the Enterprise, development isn't sexy. It's necessary and wants to use boring but reliable technology. They like to throw bodies at a problem and that requires reliable frameworks with easily understood decision points. Producing code right is a strong case for TypeScript and they pull that through to the end user. Many frameworks start solving a small set of problems, become popular, and then bolt on what they need to solve everything else... Dojo tried to make sure it had the entire package in a clear, easy to use way. You can build great apps with most of the big frameworks out there. Dojo has been doing this for long enough that they know where to optimize for maintainability and performance. [00:29:00] Where is Dojo's sweet spot? The Sitepen Blog series on picking a framework The biggest reason for using Dojo over the years is the data grid component. They also claim to have the best TypeScript web development experience. You may also want a component based system with the composition hassles of React. The composability of components where one team may write components that another uses is a big thing in Dojo where one person doesn't know the entire app you're working on. Theming systems is another selling point for Dojo. [00:34:10] Ending the framework wars Try Dojo out and try out the grid component and then export it to your Angular or React app. There are a lot of frameworks out there that do a great job for the people who use them. The focus is on how to build applications better, rather than beating out the competition. Sitepen has build apps with Dojo 2, Angular, React, Dojo + Redux, etc. [00:39:01] The Virtual DOM used by Dojo 2 years ago or so they were looking for a Virtual DOM library that was small and written in TypeScript. They settled on Maquette. The more you deal with the DOM directly, the more complex your components and libraries become. Makes things simpler for cases like server side rendering getting fleshed out in BETA 3. It also allows you to move toward something like React Native and WebVR components that aren't coupled to the DOM. They moved away from RxJS because they only wanted observables and shimmed in (or polyfilled) the ES-Next implementation instead of getting the rest of the RxJS that they're not using. [00:46:40] What's coming next? They're finishing Dojo 2. They're polishing the system for build UI components and architecture and structuring the app. They plan to release before the end of the year. They're also wrapping up development on the Data Grid, which only renders what shows on the screen plus a little instead of millions of rows. [00:49:08] Testing They've got intern. It pulls together unit testing, functional testing, continuous integration hooks, accessibility testing, etc. It's rewritten in TypeScript to take advantage of modern JavaScript. The Dojo CLI uses intern as the default test framework. Kitson build the test-extras library to help with Dojo testing with intern. Dojo Links dojo.io github.com/dojo/meta sitepen.com/blog gitter channel github.com/dylans twitter.com/dylans twitter.com/sitepen twitter.com/dojo github.com/kitsonk twitter.com/kitsonk Picks Cory Amateur vs Professional Aimee DevFest Florida (use code 'jsjabber') Chuck Taking some time off AudioTechnica ATR2100 How to define your life purpose in 5 minutes Dylan zenhub HalfStack Conference How to choose a framework series on the Sitepen Blog Kitson Dunbar Number
Summary This week Andrea Giammarchi joins us to talk about his latest project hyperHTML! A lightweight Virtual DOM alternative. Andrea talks us through what the project is all about and what he discovered about template literals to make it happen. We talk about how hyperHTML compares to Virtual DOM implementations and the similarities between hyperHTML and the newly announced lit-html. This Week in Web News TypeScript 2.5 RC is now available which includes a new ECMAScript feature allowing you to omit the error variable in catch statements Only a couple of days left to submit talk proposals for NationJS a full stack developer conference happening in Washington, DC on December 1st this year A new site created by Rob Dodson called Custom Elements Everywhere has been released which scores popular JavaScript frameworks on their compatibility with Custom Elements The Polymer team announced lit-html at the Polymer summit, lit-html allows you to write HTML templates with template literals and efficiently render and re-render them to the DOM - more on this later in the episode! Another update from the Polymer Summit: Polymer has announced support for npm and JavaScript modules Resources hyperHTML viperHTML nativeHTML Template Literals hyperHTML & DB Monster viperHTML example hyperMVC Guests Andrea Giammarchi (@WebReflection) Panel Justin Ribeiro (@justinribeiro) Leon Revill (@revillweb) Follow The Web Platform podcast on Twitter for regular updates @TheWebPlatform.
Ember is a growing JavaScript framework that large companies like LinkedIn are using for their web application. In this episode, we are joined by Stacy London from Atlassian to discuss the advantages and disadvantages of leveraging Ember as a JavaScript framework. Items mentioned in the episode: Ember, React, Angular, Ember a11y, Ember Fastboot, Ember Resolver, Frontend Masters, Ember Community Slack, Ember Conf, Ember Docs, Yehuda Katz, Django, Computed Properties, Obervables, Firebase, Handlebars, Mustache, Backbone, ASP.Net, Virtual DOM, Rust, Swift, Tom Dale, Kyle Simpson, Stefan Penner, Nathan Hammond, Chad Hietala, Brendan McLoughlin, Lauren Tan (Sugar Pirate), Erik Bryn, Jafar Husain, Mike North Guests: Stacy London - @stacylondoner Panelists: Ryan Burgess - @burgessdryan Derrick Showers - @derrickshowers Brian Holt - @holtbt Picks: Ryan Burgess - Crimetown Ryan Burgess - Hip-Hop Evolution Ryan Burgess - The OA Derrick Showers - Ember Twiddle Derrick Showers - Dockyard Derrick Showers - Ember Community Slack Brian Holt - Webpack Brian Holt - Preact Brian Holt - Mike North Stacy London - CSS Grid Stacy London - Girl Develop It
“Hey guys, In this section we are going to go through the 3 aspects of React.js i.e. class based components, handling user events and exporting components, During 2 previous courses we have introduced the general concept of React.js, difference between using React and Angular.js, what are react components and as well as we have introduced a little bit what is Virtual DOM and how it works. We’ve gone little bit further and investigated what are react components elements and instances, how to declare a button, how to create, update, and destroy child elements and talked a little bit about the use of RxJS with React.”
Paul Shannon tells us all about Template Strings. Neil talks Virtual DOM. Nick give us the lowdown on Chrome extensions and Torrey finally fixed his microphone! The post SitePen Podcast Episode 004 appeared first on TalkScript.FM.
Paul Shannon tells us all about Template Strings. Neil talks Virtual DOM. Nick give us the lowdown on Chrome extensions and Torrey finally fixed his microphone! The post SitePen Podcast Episode 004 appeared first on SitePen.
Get your Ruby Remote Conf tickets and check out the @rubyremoteconf Twitter feed for exciting updates about the conference. 02:22 - Spike Brehm Introduction Twitter GitHub Blog Airbnb @airbnb @airbnbnerds 03:07 - rendr Isomorphic JavaScript Single-Page Application Routes and Controllers 06: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 Frontend Caching 20:28 - Tools That Help Browserify webpack set-cookie 22:21 - Why do this? Who gets statically and dynamically rendered pages? Airbnb Mobile Hydration React Virtual DOM Diffing Delegation 30:26 - DOM and String-based Templating Handlebars.js Express.js Mounting 33:11 - Use Cases Meteor Asana 36:08 - Why does Isomorphic JavaScript get so much hate? Charlie Robbins: Scaling Isomorphic Javascript Code Michael Jackson: Universal JavaScript Picks 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)
Get your Ruby Remote Conf tickets and check out the @rubyremoteconf Twitter feed for exciting updates about the conference. 02:22 - Spike Brehm Introduction Twitter GitHub Blog Airbnb @airbnb @airbnbnerds 03:07 - rendr Isomorphic JavaScript Single-Page Application Routes and Controllers 06: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 Frontend Caching 20:28 - Tools That Help Browserify webpack set-cookie 22:21 - Why do this? Who gets statically and dynamically rendered pages? Airbnb Mobile Hydration React Virtual DOM Diffing Delegation 30:26 - DOM and String-based Templating Handlebars.js Express.js Mounting 33:11 - Use Cases Meteor Asana 36:08 - Why does Isomorphic JavaScript get so much hate? Charlie Robbins: Scaling Isomorphic Javascript Code Michael Jackson: Universal JavaScript Picks 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)
Get your Ruby Remote Conf tickets and check out the @rubyremoteconf Twitter feed for exciting updates about the conference. 02:22 - Spike Brehm Introduction Twitter GitHub Blog Airbnb @airbnb @airbnbnerds 03:07 - rendr Isomorphic JavaScript Single-Page Application Routes and Controllers 06: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 Frontend Caching 20:28 - Tools That Help Browserify webpack set-cookie 22:21 - Why do this? Who gets statically and dynamically rendered pages? Airbnb Mobile Hydration React Virtual DOM Diffing Delegation 30:26 - DOM and String-based Templating Handlebars.js Express.js Mounting 33:11 - Use Cases Meteor Asana 36:08 - Why does Isomorphic JavaScript get so much hate? Charlie Robbins: Scaling Isomorphic Javascript Code Michael Jackson: Universal JavaScript Picks 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)
Naoya Itoさんをゲストに迎えて、任天堂、将棋電王戦、torne mobile, React, Flux, Node などについて話しました。 スポンサー: ハッカーズチャンプルー2015 Show Notes 任天堂、新ゲーム機 NX を予告 任天堂とDeNAの提携について:かわんごのブロマガ - ブロマガ 将棋電王戦FINAL第2局で衝撃の結末 Seleneが永瀬六段の異例の指し手「角成らず」を認識できず反則負けに 将棋電王戦FINAL 第2局 永瀬拓矢六段 vs Selene Amazon.co.jp： nasne 1TBモデル スマホをテレビ化するnasne連携アプリ「torne mobile」 - AV Watch nasne開発陣に聞く「リモート視聴」対応とVer.2.50の狙い - AV Watch ハッカーズチャンプルー2015 ★ K Nishijimaのぶろぐ: ハッカーズチャンプルー2014、無事終わりました React: A JavaScript library for building user interfaces ng-japan - The first Angular conference in Tokyo, Japan reactjs - React 雑感 - Qiita Rebuild: Aftershow 79: Better Way To Support The Show (Naoya Ito) Introduction to React.js - YouTube #13 Virtual DOM | mozaic.fm Isomorphic JavaScript: The Future of Web Apps - Airbnb Engineering Ajaxを劇的に簡単にするReact.js – @masuidrive blog Flux | Application Architecture for Building User Interfaces Fluxxor - Home React JS and Flux in Rails, a complete example | Aspiring Web Developer Rails Assets Replacing the Rails asset pipeline with Gulp The npm Blog — npm and front-end packaging Google's Angular 2 being built with Microsoft's TypeScript
React's Virtual DOM (Document Object Model) & the browser DOM are very different in their approach. Virtual DOM prefers to keep it's logic and changes in JavaScript and eventually optimizes output to the browser DOM at the most critical moment that provides performance boosts while the browser DOM utilizes the traditional way of working with the document, accessing HTML directly, working with browser events, and manipulating state. The performance gains from a Virtual DOM approach are outstanding despite the fact that events, css, markup, and ‘all-of-the-things' are stubbed, recreated, or handled in some way inside the JavaScript. Browser DOM, on the other hand, handles everything in the global document and leverages JavaScript, CSS, and other resources directly. Surely these approaches are not good to use together. Wrong! Andrew Rota (@AndrewRota) & Denis Radin (@PixelsCommander) talk about the ways you can leverage both Web Components & React.js together in a symbiotic fashion. Denis, creator of Reactive Elements, starts us off explaining how his library came to be and why he chose to marry these two technologies in his work. Andrew, who spoke at ReactConf 2015 talks about his experiences with Web Components & React. Resources Reactive Elements - https://github.com/PixelsCommander/ReactiveElements Component Interop With React And Custom Elements - http://addyosmani.com/blog/component-interop-with-react-and-custom-elements/ Pros/Cons of React vs. Web Components - http://programmers.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer Combining React, Flux & Web Components - http://futurice.com/blog/combining-react-flux-and-web-components Complementarity of React and Web Components - http://webcomponents.org/presentations/complementarity-of-react-and-web-components-at-reactjs-conf/ React vs. Polymer - https://news.ycombinator.com/item?id=8050649 React Demystified - http://blog.reverberate.org/2014/02/react-demystified.html Rob Dodson's experiments with React & Web Components - https://github.com/robdodson/react-polymer Front End Tower of Babylon - http://www.slideshare.net/DenisRadin/frontend-tower-of-babylon React vs. Web Components article - https://www.pandastrike.com/posts/20150311-react-bad-idea Panelists Erik Isaksen - UX Engineer at3Pillar Global Nick Niemeir - JavaScript Agent Engineer at New Relic
第 13 回 Virtual DOM の SideShow です。@mizchi さんとのこぼれ話をお送りします。 Show Note はこちら: https://mozaic.fm/episodes/13/virtual-dom-sideshow.html
第 13 回のテーマは Virtual DOM です。今回は @mizchi さんをお迎えして、 Virtual DOM というアイデアの本質、それが可能にした Flux というアーキテクチャ、そして各種の実装と今後の期待について、「今何が起こっているのか」、「これからどうなっていくのか」を議論しました。 Show Note はこちら: https://mozaic.fm/episodes/13/virtual-dom.html
Defender of Magic, wizardry and the web, and CEO of Famo.us, Steve Newcomb (@stevenewcomb), walks us through the current state of Famo.us. Steve talks about how they are innovating the web and what we can expect in the future of “mobile first” web development from Famo.us. Famo.us utilizes the power of a Virtual DOM combined with several engines that optimize the power of “cpu bound” performance. Famo.us claims to have mobile performance improvements that eliminate ‘janky' animations and blur the lines between native device apps and mobile web apps. Steve goes on to talk about how in April Famo.us will be releasing several features that will enable designers to easily pair with developers and also a new way of building with the framework that will “marry” native and web technology. “Mixed Mode” is a breakthrough for the team and apps built with this new feature will likely have native or even better than native UX & performance. Resources Famo.us Crunchbase - http://www.crunchbase.com/organization/famo-us Famo.us Angular - http://www.famo.us/integrations/angular/#/intro Famo.us - http://famo.us Famo.us University - http://famo.us/university/home/#/ Steve NewComb Twitter - https://twitter.com/stevenewcomb ASM.js - http://asmjs.org/ “3D Physics for DOMies” - https://www.youtube.com/watch?v=83MX4wsoMzU Polymer - https://www.polymer-project.org React - http://facebook.github.io/react/ Angular - https://angularjs.org/ Famo.us YouTube Channel - https://www.youtube.com/channel/UCiFhuK7AExmfhl8iUzw2g4w Ionic Framework - http://ionicframework.com/ Elm - http://elm-lang.org/ Release 0.3.0 - https://github.com/Famous/famous/releases/tag/0.3.0 Browserify - http://browserify.org/
Episode 15 deep dives into the programming experiences of Adam Solove (@asolove), Head of Engineering at Pagemodo. Adam has spent the last ten years building web interfaces various technologies such as CGI, Flash, DHTML, RJS, jQuery, and many MVC JavaScript frameworks. Adam has found over his career that working with a more functional style of programming is much more rewarding in many ways. Functional programming and FRP (Functional Reactive Programming) provides improvements in performance and purposely avoids changing-state and mutable data. This can be an extremely effective technique in web application development because of the stateful nature of DOM (Document Object Model) implementations in the browser. Adam evangelizes and works with several languages and tools to provide incredible functional style applications including, but not limited to, Elm, ClojureScript, OM, & React.js. Facebook's React.js, met with mixed reviews when it was first released in 2013. Since then it has been stirring up support in droves within the JavaScript development community do to it's high UI performance output in browsers. It's Virtual DOM and ways of solving data & DOM performance problems have been highly criticized but hard to ignore. React has an effective unorthodox way of thinking about UI. Elm, a functional reactive language for interactive applications, combines core features of functional languages like immutability & type inference with FRP to Create highly interactive applications without callbacks or shared state. Elm is similar in syntax to Haskell and it compiles to HTML, CSS, and JavaScript that uses a Virtual DOM model similar in concepts to that of react.js. According to Elm's internal benchmarks, using it's compiled JavaScript code is actually faster than any JavaScript framework tested by a extreme margin. ClojureScript, is a new compiler for Clojure that targets JavaScript. It is designed to emit JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler. David Nolen, has taken ClojureScript and created an interface for react.js called OM. Om allows for simple represention of Web Application User Interfaces as an EDN. ClojureScript data is immutable data, which means that Om can always rapidly re-render the UI from the root. According to the project description, UIs created with Om are inherently able to create & manage historical snapshots with no implementation complexity and little overhead. Resources Why use Functional Style? - http://stackoverflow.com/questions/36504/why-functional-languages Lambda: the ultimate syntax-semantics interface - http://okmij.org/ftp/gengo/NASSLLI10/ Haskell -http://www.haskell.org/haskellwiki/Haskell Adam Solove - http://adamsolove.com/ Adam's talk on ClojureScript/OM - http://adamsolove.com/js/clojure/2014/05/08/react-js-and-om.html Elm Elm's Virtual DOM - http://elm-lang.org/blog/Blazing-Fast-Html.elm Elm's Time Travelling Debugger - http://debug.elm-lang.org/ ClojureScript & OM ClojureScript Intro 2011 - http://clojure.com/blog/2011/07/22/introducing-clojurescript.html A feature comparison to JavaScript - http://himera.herokuapp.com/synonym.html David Nolen - https://twitter.com/swannodette/ David Nolen's Benchmarks - http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/ Todo MVC - https://github.com/swannodette/todomvc/tree/gh-pages/labs/architecture-examples/om/src/todomvc React.js Reactjs - http://facebook.github.io/react/ Secrets of The Virtual DOM - http://fluentconf.com/fluent2014/public/schedule/detail/32395 React Demystified - React Diff Algorithm - http://calendar.perfplanet.com/2013/diff/
“Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.” - Facebook's Flux Architecture Home Page - Bill Fisher (@fisherwebdev), Facebook Software Engineer & Lead Developer of the Flux Documentation, joins The Web Platform Podcast for ‘Episode 12: Flux Application Architecture & ReactJS.' Bill talks with hosts Nick Niemeir (@nickniemeir) & Erik Isaksen (@eisaksen) about Flux, an application architecture similar in ideas to CQRS & Data Flow Programming. It was created to alleviate the performance & scalability problems that Facebook encountered in building Facebook Messenger (Watch ‘Hacker Way: Rethinking Web App Development at Facebook' - a presentation by Jing Chen, Software Engineer at Facebook, for further information). Flux promotes a unidirectional data flow model through an application. In contrast to MVC, Flux mainly consists of Stores, a central Dispatcher, and Controller-Views. Facebook has React.js as its view layer and and Flux is quickly becoming the architectural design of choice for many of its other web applications. The support, power, and marketing behind the Angular.js and Ember.js frameworks is undeniable and when Facebook released React.js many developers misunderstood its Virtual DOM approach because it was not like the frameworks developers are used too. Despite that, Facebook has proved itself a ‘contender' in the eyes of many in the development community and many developers and engineering teams are switching their ‘framework of choice' to React.js. Flux combined with React.js offers many appealing possibilities but it is not limited to use with just React.js. Flux is an application architecture and it can be used as a pattern in almost any technology stack for web application development. Flux & React Resources Introduction - http://facebook.github.io/react/docs/flux-overview.html Github Source Code - https://github.com/facebook/flux Chat Example Tutorial -http://facebook.github.io/flux/docs/chat.html#content ReactiveElement Article - http://addyosmani.github.io/react-interop/demo.html Flux Home Page - http://facebook.github.io/flux/ PropTypes - https://github.com/facebook/react/blob/master/src/core/ReactPropTypes.js Testing Article - http://facebook.github.io/react/blog/2014/09/24/testing-flux-applications.html Facebook's Jest - http://facebook.github.io/jest/ OM ClojureScript Interface to React - https://github.com/swannodette/om React.js - http://facebook.github.io/react/ Roundup - http://facebook.github.io/react/blog/2014/09/12/community-round-up-22.html Hacker Way: Rethinking Web App Development at Facebook - https://www.youtube.com/watch?v=nYkdrAPrdcw&list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v Flux Projects In Progress Adobe Brackets - http://brackets.io/ Yahoo Mail - http://mail.yahoo.com Flux Implementations Reactive Elements - http://pixelscommander.com/polygon/reactive-elements/example/#.VCVD7yldXkR ReFlux - https://github.com/spoike/refluxjs Fluxxor - http://fluxxor.com/ Fluxie - https://github.com/jmreidy/fluxy DeLorean - http://deloreanjs.com/ React Channels Facebook Support - http://facebook.github.io/flux/support.html Stackoverflow - http://stackoverflow.com/search?q=flux+react IRC - irc://chat.freenode.net/reactjs Google Group - https://groups.google.com/forum/#!forum/reactjs
© 2020-2025 Ivy Podcast Discovery LLC
