Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Why Use a Frontend Framework at All?

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p>In this Hasty Treat, Scott and Wes talk about frontend frameworks — what they are, when you need one, how to organize your code for maximum efficiency, and more!</p> <h2><a id="Stackbit__Sponsor_9" name= "Stackbit__Sponsor_9"></a>Stackbit - Sponsor</h2> <p>Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting <a href= "https://www.stackbit.com/syntaxfm/">stackbit.com/syntaxfm</a>.</p> <h2><a id="Show_Notes_13" name="Show_Notes_13"></a>Show Notes</h2> <p>3:08 - What is a frontend framework?</p> <ul> <li>JavaScript based <ul> <li>Controls applications such as: <ul> <li>Routing</li> <li>Rendering</li> <li>Data Fetching</li> </ul> </li> <li>Examples: <ul> <li>React</li> <li>Angular</li> <li>VueJS</li> <li>Ember</li> <li>Backbone</li> <li>Svelte</li> </ul> </li> </ul> </li> </ul> <p>5:54 - When to use a frontend framework</p> <ul> <li>The Link between your JavaScript data and the DOM (your HTML) isn’t live</li> <li>The use of frameworks makes re-updating the DOM (after the initial variable update) easy</li> <li>You need an opinionated way to handle complexity <ul> <li>Example: <ul> <li>You add an item to a shopping cart, send the event to the backend, and update both the number of items in the cart and the “Add to cart” button</li> <li>Event Handlers - binding and un-binding</li> </ul> </li> </ul> </li> <li>Your client wants a fast, modern experience</li> <li>Seamless routing and page transitions</li> <li>Fast prototyping</li> <li>Access to battle-tested libraries <ul> <li>Security</li> <li>Perf</li> </ul> </li> </ul> <p>14:24 - When not to use a frontend framework</p> <ul> <li>When using CMS like WordPress and Drupal</li> <li>A medium amount of JavaScript is needed - Vanilla JS will work fine <ul> <li>Modals</li> <li>Slideshows</li> <li>Form submits</li> </ul> </li> <li>Static pages, no JS functionality</li> <li>Updating an existing project</li> </ul> <p>17:20 - Why can’t I just use jQuery?</p> <ul> <li>Vanilla JS contains all of jQuery’s available DOM APIs</li> <li>Frameworks provide structure</li> <li>Organizes code for big projects</li> </ul> <h2><a id="Links_61" name="Links_61"></a>Links</h2> <ul> <li><a href="https://syntax.fm/show/039/is-jquery-dead">Syntax 039: Is jQuery Dead?</a></li> </ul> <h2><a id="Tweet_us_your_tasty_treats_64" name= "Tweet_us_your_tasty_treats_64"></a>Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about frontend frameworks — what they are, when you need one, how to organize your code for maximum efficiency, and more!
 Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.
 Show Notes 3:08 - What is a frontend framework?
 JavaScript based Controls applications such as: Routing
 Rendering
 Data Fetching

 Examples: React
 Angular
 VueJS
 Ember
 Backbone
 Svelte

 5:54 - When to use a frontend framework
 The Link between your JavaScript data and the DOM (your HTML) isn’t live
 The use of frameworks makes re-updating the DOM (after the initial variable update) easy
 You need an opinionated way to handle complexity Example: You add an item to a shopping cart, send the event to the backend, and update both the number of items in the cart and the “Add to cart” button
 Event Handlers - binding and un-binding

 Your client wants a fast, modern experience
 Seamless routing and page transitions
 Fast prototyping
 Access to battle-tested libraries Security
 Perf

 14:24 - When not to use a frontend framework
 When using CMS like WordPress and Drupal
 A medium amount of JavaScript is needed - Vanilla JS will work fine Modals
 Slideshows
 Form submits

 Static pages, no JS functionality
 Updating an existing project
 17:20 - Why can’t I just use jQuery?
 Vanilla JS contains all of jQuery’s available DOM APIs
 Frameworks provide structure
 Organizes code for big projects
 Links Syntax 039: Is jQuery Dead?
 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

Aplikace Youradio Talk

Hasty Treat - Why Use a Frontend Framework at All?

Poslechněte si podcast