Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

767: Local First and TypeScript’s Missing Library with Johannes Schickling

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.

In this episode, Scott and Wes dive into the world of local-first apps with Johannes Schickling, the mastermind behind Prisma. From databases, WASM for non-JS, to authentication challenges, they explore the ins and outs of crafting apps that prioritize local functionality. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:10">01:10</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=01:28">01:28</a> What is <a href= "https://overtone.pro/">Overtone</a>?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=03:45">03:45</a> Can you explain the experience you’re trying to achieve?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=06:43">06:43</a> What makes the best music app? Is it local first?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=08:03">08:03</a> Is it best to create a local first app from the ground up?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=10:31">10:31</a> What are the considerations when making a local first app?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=13:04">13:04</a> What database are you using?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://riffle.systems/">Riffle</a>.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=16:12">16:12</a> How do you handle authentication?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=19:15">19:15</a> Pick the tech based on the problem.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=20:40">20:40</a> WASM for Non-JS or heavy lifting tasks.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=24:39">24:39</a> How did you get SQLite running in the browser?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=27:58">27:58</a> What about WA-SQLite, how does it compare to <a href= "https://riffle.systems/">Riffle</a>?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://github.com/tldraw/make-real">TLDraw Make-real</a>.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=29:24">29:24</a> The backstory of <a href="https://effect.website/">Effect</a> for TypeScript.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=34:04">34:04</a> What actually is Effect?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=39:32">39:32</a> Consolidating tools.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=42:30">42:30</a> What’s a cool aspect of Effect that is often overlooked?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=45:47">45:47</a> Building a web server with this.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://github.com/Effect-TS/rpc">EffectTS RPC</a>.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=48:16">48:16</a> Will this ever get <a href= "https://www.npmjs.com/package/bluebird">“Bluebirded”</a>?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=50:29">50:29</a> What about promises?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://www.zioworld.com/">Zio World</a></li> <li class="has-line-data" data-line-start="28" data-line-end="30"> <a href="#t=52:19">52:19</a> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="30" data-line-end="31"> <a id="Sick_Picks_30"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="32" data-line-end="34"> Johannes: <a href="https://opentelemetry.io/">Open Telemetry</a>, <a href="https://sentry.io/for/opentelemetry/">Sentry Open Telemetry</a>.</li> </ul> <h3 class="code-line" data-line-start="34" data-line-end="35"> <a id="Shameless_Plugs_34"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="36" data-line-end="38"> Johannes: <a href= "https://www.localfirst.fm/">localfirst.fm</a>.</li> </ul> <h3 class="code-line" data-line-start="38" data-line-end="39"> <a id="Hit_us_up_on_Socials_38"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

In this episode, Scott and Wes dive into the world of local-first apps with Johannes Schickling, the mastermind behind Prisma. From databases, WASM for non-JS, to authentication challenges, they explore the ins and outs of crafting apps that prioritize local functionality.
 Show Notes  00:00 Welcome to Syntax!
 01:10 Brought to you by Sentry.io.
 01:28 What is Overtone?
 03:45 Can you explain the experience you’re trying to achieve?
 06:43 What makes the best music app? Is it local first?
 08:03 Is it best to create a local first app from the ground up?
 10:31 What are the considerations when making a local first app?
 13:04 What database are you using?
 Riffle.
 16:12 How do you handle authentication?
 19:15 Pick the tech based on the problem.
 20:40 WASM for Non-JS or heavy lifting tasks.
 24:39 How did you get SQLite running in the browser?
 27:58 What about WA-SQLite, how does it compare to Riffle?
 TLDraw Make-real.
 29:24 The backstory of Effect for TypeScript.
 34:04 What actually is Effect?
 39:32 Consolidating tools.
 42:30 What’s a cool aspect of Effect that is often overlooked?
 45:47 Building a web server with this.
 EffectTS RPC.
 48:16 Will this ever get “Bluebirded”?
 50:29 What about promises?
 Zio World

 52:19 Sick Picks + Shameless Plugs.
  Sick Picks  Johannes: Open Telemetry, Sentry Open Telemetry.
  Shameless Plugs  Johannes: localfirst.fm.
  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott:X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

Aplikace Youradio Talk

767: Local First and TypeScript’s Missing Library with Johannes Schickling

Poslechněte si podcast