Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Meteor's 2nd Life

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 of Syntax, Scott and Wes talk with Filipe Névola about Meteor and the exciting things happening in the Meteor world!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14">If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code “tastytreat”.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Guests_15" name="Guests_15"></a>Guests</h2> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://blog.meteor.com/@filipenevola">Filipe Névola</a></li> <li class="has-line-data" data-line-start="17" data-line-end="19"> <a href="https://twitter.com/filipenevola">@filipenevola</a></li> </ul> <h2 class="code-line" data-line-start="19" data-line-end="20"> <a id="Show_Notes_19" name="Show_Notes_19"></a>Show Notes</h2> <p class="has-line-data" data-line-start="21" data-line-end="22"> 01:20 - What is your background?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 03:41 - What exactly is Meteor?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 12:00 - What are the biggest misconceptions of modern meteor?</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 18:20 - What do you say to people who think Meteor is dead?</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 21:33 - How does data get from your Meteor into your React app?</p> <ul> <li class="has-line-data" data-line-start="31" data-line-end="33"> Example of getting data on client side</li> </ul> <pre data-initialized="true" data-gclp-id="11"> <code class="has-line-data" data-line-start="34" data-line-end= "69">import { useTracker } from 'meteor/react-meteor-data'  // Hook, basic use, everything in one component const MyProtectedPage = (pageId) => {   const { user, isLoggedIn, page } = useTracker(() => {     // The publication must also be secure     const subscription = Meteor.subscribe('page', pageId)     const page = Pages.findOne({ _id: pageId })     const user = Meteor.user()     const userId = Meteor.userId()     const isLoggingIn = Meteor.loggingIn()     return {       page,       isLoading: !subscription.ready(),       user,       userId,       isLoggingIn,       isLoggedIn: !!userId     }   }, [pageId])      if (!isLoggedIn) {     return <div>       <Link to="/register">Create an Account</Link>       <Link to="/login">Log in</Link>     </div>   }      return <div>     <h1>{page.title}</h1>     <p>{page.content}</p>     <a href="#" onClick={(e) => { e.preventDefault(); Meteor.logout(); }}>Log out ({user.username})</a>   </div> } </code> </pre> <p class="has-line-data" data-line-start="70" data-line-end="71"> 27:50 - What do you think is the ideal usecase for Meteor?</p> <p class="has-line-data" data-line-start="72" data-line-end="73"> 31:09 - Why did Meteor 1.0 fail to maintain hype?</p> <p class="has-line-data" data-line-start="74" data-line-end="75"> 36:41 - What does Meteor’s future look like?</p> <p class="has-line-data" data-line-start="76" data-line-end="77"> 45:27 - Are there any plans to integrate serverless into Meteor?</p> <p class="has-line-data" data-line-start="78" data-line-end="79"> 46:55 - Any little known features of Meteor that people might be interested in?</p> <h2 class="code-line" data-line-start="80" data-line-end="81"> <a id="Links_80" name="Links_80"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://www.meteor.com/">Meteor</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href="https://www.tinycapital.com/">Tiny Capital</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://deno.land/">Deno</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://www.meteor.com/hosting">Meteor Galaxy</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://mongoosejs.com/">Mongoose</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://parceljs.org/">Parcel</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> <a href="https://www.apollographql.com/">Apollo</a></li> <li class="has-line-data" data-line-start="88" data-line-end="89"> <a href="https://www.mongodb.com/">MongoDB</a></li> <li class="has-line-data" data-line-start="89" data-line-end="90"> <a href="https://svelte.dev/">Svelte</a></li> <li class="has-line-data" data-line-start="90" data-line-end="91"> <a href="https://github.com/meteor/meteor">Meteor repo</a></li> <li class="has-line-data" data-line-start="91" data-line-end="92"> <a href="http://meteor-up.com/">Meteor Up</a></li> <li class="has-line-data" data-line-start="92" data-line-end="93"> <a href= "https://howtocreateanapp.dev/">https://howtocreateanapp.dev/</a></li> <li class="has-line-data" data-line-start="93" data-line-end="94"> <a href= "https://www.youtube.com/channel/UC8A0hHUaCBvuBs0eA5g_q3A">https://www.youtube.com/channel/UC8A0hHUaCBvuBs0eA5g_q3A</a></li> <li class="has-line-data" data-line-start="94" data-line-end="95"> <a href="https://cordova.apache.org/">Cordova</a></li> <li class="has-line-data" data-line-start="95" data-line-end="96"> <a href="https://missiveapp.com/">Missive</a></li> <li class="has-line-data" data-line-start="96" data-line-end="98"> <a href="https://forums.meteor.com/">Meteor Forums</a></li> </ul> <h2 class="code-line" data-line-start="98" data-line-end="99"> <a id="_SIIIIICK__PIIIICKS__98" name= "_SIIIIICK__PIIIICKS__98"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="99" data-line-end="102"> Filipe: <ul> <li class="has-line-data" data-line-start="100" data-line-end= "101">1: <a href= "https://www.meteor.com/hosting">Galaxy</a></li> <li class="has-line-data" data-line-start="101" data-line-end= "102">2: <a href= "https://www.196flavors.com/paraguay-terere/">Terere</a></li> </ul> </li> <li class="has-line-data" data-line-start="102" data-line-end= "103">Scott: <a href="https://amplifi.com/alien">Amplifi Alien Router</a></li> <li class="has-line-data" data-line-start="103" data-line-end= "105">Wes: <a href="https://parcelapp.net/">Parcel - Global Package Tracking</a></li> </ul> <h2 class="code-line" data-line-start="105" data-line-end="106"> <a id="Shameless_Plugs_105" name= "Shameless_Plugs_105"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="106" data-line-end= "107">Filipe: <a href= "https://twitter.com/filipenevola">@filipenevola</a></li> <li class="has-line-data" data-line-start="107" data-line-end= "108">Scott: <a href= "https://www.leveluptutorials.com/pro">All Courses</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="108" data-line-end= "110">Wes: <a href="https://wesbos.com/courses/">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="110" data-line-end="111"> <a id="Tweet_us_your_tasty_treats_110" name= "Tweet_us_your_tasty_treats_110"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="111" data-line-end= "112"><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="112" data-line-end= "113"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="113" data-line-end= "114"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="114" data-line-end= "115"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="115" data-line-end= "116"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="116" data-line-end= "117"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="117" data-line-end= "118">Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Scott and Wes talk with Filipe Névola about Meteor and the exciting things happening in the Meteor world!
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
 Guests  Filipe Névola

 @filipenevola

  Show Notes 01:20 - What is your background?
 03:41 - What exactly is Meteor?
 12:00 - What are the biggest misconceptions of modern meteor?
 18:20 - What do you say to people who think Meteor is dead?
 21:33 - How does data get from your Meteor into your React app?
  Example of getting data on client side
  import { useTracker } from 'meteor/react-meteor-data' // Hook, basic use, everything in one component const MyProtectedPage = (pageId) => {  const { user, isLoggedIn, page } = useTracker(() => {   // The publication must also be secure   const subscription = Meteor.subscribe('page', pageId)   const page = Pages.findOne({ _id: pageId })   const user = Meteor.user()   const userId = Meteor.userId()   const isLoggingIn = Meteor.loggingIn()   return {    page,    isLoading: !subscription.ready(),    user,    userId,    isLoggingIn,    isLoggedIn: !!userId   }  }, [pageId])   if (!isLoggedIn) {   return    Create an Account    Log in    }   return   {page.title}   {page.content}
   Log out ({user.username})  }  27:50 - What do you think is the ideal usecase for Meteor?
 31:09 - Why did Meteor 1.0 fail to maintain hype?
 36:41 - What does Meteor’s future look like?
 45:27 - Are there any plans to integrate serverless into Meteor?
 46:55 - Any little known features of Meteor that people might be interested in?
 Links  Meteor

 Tiny Capital

 Deno

 Meteor Galaxy

 Mongoose

 Parcel

 Apollo

 MongoDB

 Svelte

 Meteor repo

 Meteor Up

 https://howtocreateanapp.dev/

 https://www.youtube.com/channel/UC8A0hHUaCBvuBs0eA5g_q3A

 Cordova

 Missive

 Meteor Forums

  ××× SIIIIICK ××× PIIIICKS ×××  Filipe: 1: Galaxy

 2: Terere

 Scott: Amplifi Alien Router

 Wes: Parcel - Global Package Tracking

  Shameless Plugs Filipe: @filipenevola

 Scott: All Courses - Sign up for the year and save 25%!
 Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
  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

Meteor's 2nd Life

Poslechněte si podcast