Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Practical: How would we build Airbnb, Twitter, or Reddit?

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 class="has-line-data" data-line-start="7" data-line-end="8">In this episode, Scott and Wes are trying something new! It’s called Practical, in which Scott and Wes take a topic and flesh out all the theory into something super practical. Today’s topic comes from a listener question asking how they would build a simple version of a modern web app like Twitter, Reddit, or Airbnb.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Netlify__Sponsor_9" name="Netlify__Sponsor_9"></a>Netlify - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up <a href= "https://netlify.com/syntax">netlify.com/syntax</a> for more info.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Sanity__Sponsor_12" name="Sanity__Sponsor_12"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> <a href="http://sanity.io/">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="17" data-line-end="18"> 3:03 - Backend</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://expressjs.com/">Express</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://nodejs.org/">Node</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://graphql.org/">GraphQL</a></li> <li class="has-line-data" data-line-start="22" data-line-end="24"> <a href="https://www.mongodb.com/">MongoDB</a></li> </ul> <p class="has-line-data" data-line-start="24" data-line-end="25"> 14:45 - Frontend</p> <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://reactjs.org/">React</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://nextjs.org/">Next.js</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> Styled components</li> <li class="has-line-data" data-line-start="29" data-line-end="31"> Stay as close to real CSS as possible</li> </ul> <p class="has-line-data" data-line-start="31" data-line-end="32"> 22:39 - Deployment process</p> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> Serverless</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://zeit.co/home">Now</a></li> <li class="has-line-data" data-line-start="35" data-line-end="37"> Ideally one app that handles everything</li> </ul> <p class="has-line-data" data-line-start="37" data-line-end="38"> 28:38 - Email</p> <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href= "https://syntax.fm/show/032/designing-templating-inlining-and-sending-email"> Syntax Ep 32: Designing, Templating, Inlining and Sending Email</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://mjml.io/">mjml</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://github.com/Automattic/juice">Juice</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://github.com/foundation/inky">Inky</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://nodemailer.com/">Nodemailer</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://postmarkapp.com/">Postmark</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.mailjet.com/">Mailjet</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://mandrill.com/">Mandrill</a></li> <li class="has-line-data" data-line-start="47" data-line-end="49"> Get everyone set up and working in two different systems, so you can switch easily if something goes wrong</li> </ul> <p class="has-line-data" data-line-start="49" data-line-end="50"> 33:32 - Users / Auth / Cookies / Permissions</p> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> Use something a pre-existing package or service rather than role your own (though it can get expensive quickly)</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="http://www.passportjs.org/">Passport</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://auth0.com/">Auth0</a></li> <li class="has-line-data" data-line-start="54" data-line-end="56"> <a href="https://accounts-js.netlify.com/">accounts-js</a></li> </ul> <p class="has-line-data" data-line-start="56" data-line-end="57"> 38:48 - Images</p> <ul> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://cloudinary.com/">Cloudinary</a></li> <li class="has-line-data" data-line-start="59" data-line-end="61"> <a href="https://www.imgix.com/">imgIX</a></li> </ul> <p class="has-line-data" data-line-start="61" data-line-end="62"> 41:50 - Other things to be aware of</p> <ul> <li class="has-line-data" data-line-start="63" data-line-end="68"> Handling cash <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://stripe.com/">Stripe</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://www.paypal.com/us/home">PayPal</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://www.braintreepayments.com/">Braintree</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://recurly.com/">Recurly</a></li> </ul> </li> <li class="has-line-data" data-line-start="68" data-line-end="70"> Queueing</li> </ul> <h2 class="code-line" data-line-start="70" data-line-end="71"> <a id="Links_70" name="Links_70"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://rubyonrails.org/">Ruby on Rails</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://www.djangoproject.com/">Django</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://www.meteor.com/">Meteor</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://www.mysql.com/">MySQL</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://www.php.net/">PHP</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://www.postgresql.org/">Postgres</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://mongoosejs.com/">Mongoose</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href="https://www.drip.com/">Drip</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> <a href="https://convertkit.com/">ConvertKit</a></li> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href="https://feathersjs.com/">Feathers</a></li> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://twitter.com/daffl">David Luecke</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href="https://tweetdeck.twitter.com/">Tweetdeck</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://nextjs.org/">Next.js</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href= "https://www.npmjs.com/package/react-router">react-router</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://reach.tech/router">Reach Router</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://www.gatsbyjs.org/">Gatsby</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> <a href="https://www.digitalocean.com/">Digital Ocean</a></li> <li class="has-line-data" data-line-start="88" data-line-end="89"> <a href="https://www.heroku.com/">Heroku</a></li> <li class="has-line-data" data-line-start="89" data-line-end="90"> <a href="https://redux.js.org/">Redux</a></li> <li class="has-line-data" data-line-start="90" data-line-end="91"> <a href="https://svelte.dev/">Svelte</a></li> <li class="has-line-data" data-line-start="91" data-line-end="92"> <a href="https://gridsome.org/">Gridsome</a></li> <li class="has-line-data" data-line-start="92" data-line-end="94"> <a href="https://mailchimp.com/">Mailchimp</a></li> </ul> <h2 class="code-line" data-line-start="94" data-line-end="95"> <a id="_SIIIIICK__PIIIICKS__94" name= "_SIIIIICK__PIIIICKS__94"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="95" data-line-end="96"> Scott: <a href="https://amzn.to/300gH6l">K-Safe</a></li> <li class="has-line-data" data-line-start="96" data-line-end="98"> Wes: <a href= "https://www.youtube.com/channel/UCbpMy0Fg74eXXkvxJrtEn3w">Bon Appetit YouTube Channel</a></li> </ul> <h2 class="code-line" data-line-start="98" data-line-end="99"> <a id="Shameless_Plugs_98" name="Shameless_Plugs_98"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="99" data-line-end="100"> Scott: <a href="https://www.leveluptutorials.com/pro">Svelte Course Coming Soon!</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="100" data-line-end= "102">Wes: <a href="https://flexbox.io/">Flexbox.io Course</a></li> </ul> <h2 class="code-line" data-line-start="102" data-line-end="103"> <a id="Tweet_us_your_tasty_treats_102" name= "Tweet_us_your_tasty_treats_102"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="103" data-line-end= "104"><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="104" data-line-end= "105"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="105" data-line-end= "106"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="106" data-line-end= "107"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="107" data-line-end= "108"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="108" data-line-end= "109"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="109" data-line-end= "110">Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode, Scott and Wes are trying something new! It’s called Practical, in which Scott and Wes take a topic and flesh out all the theory into something super practical. Today’s topic comes from a listener question asking how they would build a simple version of a modern web app like Twitter, Reddit, or Airbnb.
 Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
 Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
 Show Notes 3:03 - Backend
  Express

 Node

 GraphQL

 MongoDB

  14:45 - Frontend
  React

 Next.js

 Styled components
 Stay as close to real CSS as possible
  22:39 - Deployment process
  Serverless
 Now

 Ideally one app that handles everything
  28:38 - Email
  Syntax Ep 32: Designing, Templating, Inlining and Sending Email

 mjml

 Juice

 Inky

 Nodemailer

 Postmark

 Mailjet

 Mandrill

 Get everyone set up and working in two different systems, so you can switch easily if something goes wrong
  33:32 - Users / Auth / Cookies / Permissions
  Use something a pre-existing package or service rather than role your own (though it can get expensive quickly)
 Passport

 Auth0

 accounts-js

  38:48 - Images
  Cloudinary

 imgIX

  41:50 - Other things to be aware of
  Handling cash  Stripe

 PayPal

 Braintree

 Recurly

 Queueing
  Links  Ruby on Rails

 Django

 Meteor

 MySQL

 PHP

 Postgres

 Mongoose

 Drip

 ConvertKit

 Feathers

 David Luecke

 Tweetdeck

 Next.js

 react-router

 Reach Router

 Gatsby

 Digital Ocean

 Heroku

 Redux

 Svelte

 Gridsome

 Mailchimp

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: K-Safe

 Wes: Bon Appetit YouTube Channel

  Shameless Plugs  Scott: Svelte Course Coming Soon! - Sign up for the year and save 25%!
 Wes: Flexbox.io Course

  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

Practical: How would we build Airbnb, Twitter, or Reddit?

Poslechněte si podcast