Logo
    Search

    554: Desktop apps in JS × Electron and Tauri

    enDecember 26, 2022

    Podcast Summary

    • Discussing Desktop App Development with Electron and ToriJavaScript and TypeScript can be used for desktop app development through Electron and Tori. Tools like Sentry and Prismic enhance the process, with Sentry offering real-time error tracking and Prismic acting as a headless CMS for creating components.

      Desktop app development using JavaScript or TypeScript can be accomplished through platforms like Electron and Tori. During this episode of Syntax, Scott Talensky and Wes Bos discussed their experiences with these platforms and shared their excitement for their capabilities. They also highlighted the importance of having tools like Sentry and Prismic to enhance the development process. Sentry, a sponsor of the show, provides real-time error tracking and exception handling, allowing developers to quickly address issues affecting users. Prismic, another sponsor, is a headless CMS that lets developers create components and allows marketing teams to assemble pages using those components. This approach streamlines the development process and caters to both technical and marketing teams. Overall, the discussion emphasized the power and versatility of JavaScript and its related tools for creating desktop applications.

    • Creating marketing pages with Prismic and developing desktop apps with ElectronPrismic offers efficient marketing page creation through customizable components, while Electron enables desktop app development with system control and file access.

      Prismic's approach to marketing allows developers to build components that match up with various content management system (CMS) slices and output a page using their preferred framework, offering a cool and efficient way to create marketing pages. This discussion also touched upon building desktop applications using Electron, which provides more control over the system and access to the file system compared to web development. The speaker shared their experience of creating a note-taking app using Electron and React, and expressed excitement about using Tory, a new tool that supports mobile apps using WebText, for their dance app project. Overall, the conversation highlighted the versatility and potential of various development tools and frameworks for creating engaging and effective marketing pages and applications.

    • Creating a Desktop App with JavaScript and ElectronBuilding a desktop app using JavaScript and Electron is an accessible project for those familiar with JavaScript, allowing the use of known technologies and the creation of a wrapped web application that feels native.

      Building a desktop application using JavaScript and Electron can be a simple and creative project, even if similar apps already exist. The speaker, inspired by a desire to streamline his webcam selection process, built an app in under an hour, demonstrating the accessibility of desktop app development for those already familiar with JavaScript. The benefits include using known technologies, such as React or Node, for both front-end and back-end development, and the ability to create a wrapped web application, which can feel like a native desktop app. This process can be a fun and rewarding way to learn and avoid burnout. Despite the existence of similar apps, the speaker emphasizes the importance of creativity and experimentation in coding.

    • Two frameworks for building desktop apps with web tech: Electron vs ToryElectron bundles a whole browser inside the app for ease of use but larger app sizes and higher memory usage, while Tory uses native web views for smaller apps and less memory usage

      Electron and Tory are two popular frameworks for building desktop applications using web technologies, but they have different approaches. Electron bundles Chromium inside the application, providing a single target and ease of use, but resulting in larger app sizes and higher memory usage. Tory, on the other hand, utilizes the native web view of the operating system, resulting in smaller apps and less memory usage. This approach is similar to how web views work in mobile apps. The main difference is that this concept has not been widely used in the desktop space before. By not including a whole browser, apps built with Tory can be significantly smaller, as small as less than 600 kilobytes. This can be a significant advantage for users with limited resources or for applications that require minimal overhead.

    • Build cross-platform apps with Tori using a browser in a frame and native APIsDevelop and deploy web, desktop, iOS, and Android apps from the same codebase using Tori's browser-based approach and native APIs

      Tori is a framework that allows developers to build cross-platform applications using a browser in a frame, backed by APIs for native functionality. This approach, while requiring support for multiple browsers, allows for writing code once and shipping it to all native platforms. Tori's use of Rust for the core with a TypeScript API means that developers don't need to be Rust experts to use it, as most APIs are JavaScript-based. This is similar to how Meteor operates. While some may argue that web view-based apps can feel less performant or less polished than native apps, good apps built using this technology can function well and users typically don't mind that the code isn't native. The advantage of using Tori is the ability to develop and deploy a web, desktop, iOS, and Android version of an application from the same codebase. Additionally, Tori's recent addition of iOS and Android support further expands its reach.

    • Meteor's Self-Contained ArchitectureMeteor's architecture handles more functionality within the client, potentially reducing the need for inter-process messaging, and its back end can be in Rust with sidecar support for other languages.

      Meteor, an older full-stack JavaScript platform, was ahead of its time with features like direct client-to-database saving, one-click mobile app deployment using WebView and Cordova, and sidecar support for running processes in various languages. Unlike Electron, which requires communication between a Node.js process and an HTML frontend using IPC, Meteor seems to handle more functionality within the client itself, potentially reducing the need for inter-process messaging. Another notable difference is that while Electron's back end is based on Node.js, Meteor's back end can be in Rust, with sidecar support for other languages. Overall, Meteor's architecture appears more self-contained, which might simplify development compared to Electron's need for constant communication between the front and back ends.

    • A new app development platform called Tori offers a more efficient experienceTori is a new app development platform that streamlines the development process with features like running alerts, saving file systems, and copying clipboard content in a single workflow within a secure sandbox environment. It also aims to make shipping apps to the App Store easier compared to traditional methods.

      Tori, a new app development platform, offers a more efficient and streamlined development experience compared to traditional desktop apps. With Tori, developers can run alerts, save file systems, and copy clipboard content in a single workflow, all within a secure sandbox environment. However, Tori currently lacks extensive documentation, a large community, and the extensive package library found in other platforms like Electron. Additionally, the process of shipping apps to the App Store using Tori is expected to be easier compared to the painful experience of using Apple's web UI for certificates and other requirements. The downside of Tori is that it's new and not yet fully featured, but its potential for streamlined development makes it an exciting alternative to traditional desktop app development. The speaker also mentioned that the bundling and signing process in Electron, which Tori aims to improve, can be a significant pain point for developers. Overall, Tori's potential for simplifying the development process and the speaker's positive experience with it make it an intriguing option for developers looking for a more efficient way to build and deploy desktop applications.

    • Using Safari for Electron apps on Apple SiliconSafari offers performance improvements for Electron apps on Apple Silicon but lacks advanced build targets and customization options, making development more challenging. Tools like Vite plug in Electron can simplify the process with features like auto-reloading and TypeScript support.

      Using Safari instead of Chrome for running Electron apps on Apple Silicon can lead to significant performance improvements. However, there are concerns about the lack of advanced build targets and customization options in Safari compared to Chrome, which may make development more challenging. The tooling for setting up and running Electron apps, specifically with TypeScript and live reloading, can also present some difficulties. Despite these challenges, the use of tools like Vite plug in Electron can simplify the development process and offer benefits like auto-reloading and writing TypeScript for both the front and back end. Ultimately, the decision to use Electron on Apple Silicon with Safari or Chrome depends on the specific needs and priorities of the development team.

    • Bringing a breakdancing app to the App Store with SupabaseA creator shares his excitement about launching a breakdancing app on the App Store using Supabase, and discusses the potential market and JavaScript's role in desktop app development

      A creator is looking forward to bringing his long-term breakdancing app project to the App Store, now that breaking has been included in the Olympics. He is using Supabase for his app development and is excited to see how it feels to have his app available for the public. He believes that with the growing popularity of breaking, there is a potential market for such apps. The discussion also touched upon JavaScript being a significant contender for desktop application development, with Supabase and Electron being two notable platforms. The speaker encourages listeners to share their ideas for cool desktop apps they'd like to create using these tools on Twitter.

    Recent Episodes from Syntax - Tasty Web Development Treats

    790: State of JS 2023 Reactions

    790: State of JS 2023 Reactions

    Scott and Wes dive into the 2023 State of JavaScript survey, breaking down the latest trends and pain points in front-end frameworks, build tools, and JavaScript runtimes. Tune in for their hot takes and insights on what’s shaping the JavaScript landscape this year!

    Show Notes

    Sick Picks

    Shameless Plugs

    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

    789: Do More With AI - LLMs With Big Token Counts

    789: Do More With AI - LLMs With Big Token Counts

    Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 Who is Paul Copplestone?
    • 01:17 Why ‘Supa’ and not ‘Super’?
    • 02:26 How did Supabase start?
    • 08:42 Simplicity in design.
    • 10:32 How do you take Supabase one step beyond the competition?
    • 12:35 How do you decide which libraries are officially supported vs community maintained?
      • 15:17 You don’t need a client library!
    • 16:48 Edge functions for server-side functionality.
    • 18:51 The genesis of pgvector.
    • 20:59 The product strategy.
    • 22:25 What’s the story behind Supabase’s awesome docs?
    • 25:26 The tech behind Supabase.
    • 35:46 How do you balance business goals with open source?
    • 42:01 What’s next for Supabase?
    • 44:15 Supabase’s GA + new features.
    • 48:24 Who runs the X account?
    • 50:39 Sick Picks + Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    787: You Should Try Vue.js

    787: You Should Try Vue.js

    Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.

    Show Notes

    Vue.js: The Documentary.

    Sick Picks

    Shameless Plugs

    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

    786: What Open Source license should you use?

    786: What Open Source license should you use?

    Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project.

    Show Notes

    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

    785: What’s Next for NextJS with Tim Neutkens

    785: What’s Next for NextJS with Tim Neutkens

    Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 What does the React Compiler do?
    • 05:04 Will React Compiler help with managing Context?
    • 06:39 What happens if you’re not using a React Compiler?
    • 09:30 Will this work on any NextJS version?
    • 12:18 What are React Server Components?
    • 16:28 Shipping all the data inside an encapsulated component.
    • 20:17 Clearing up the frustrations around retrofitting server components.
    • 23:13 Handing migration.
    • 28:30 Is this just a fetch request with props?
    • 36:41 How closely are the NextJS and React teams working?
    • 41:53 Will we ever get Async Client Components?
    • 43:52 Async Local Storage API.
    • 45:31 Turbopack.
    • 57:51 Sick Picks & Shameless Plugs.

    Sick Picks

    Shameless Plugs

    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

    784: Logging × Blogging × Testing × Freelancing

    784: Logging × Blogging × Testing × Freelancing

    In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood.

    Show Notes

    Sick Picks

    Shameless Plugs

    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

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.

    Show Notes

    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

    782: The Developer’s Guide To Fonts with Stephen Nixon

    782: The Developer’s Guide To Fonts with Stephen Nixon

    Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.

    Show Notes

    Sick Picks

    Shameless Plugs

    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

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects.

    Show Notes

    Sick Picks

    Shameless Plugs

    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

    Related Episodes

    Part 2 of Wes and Scott React to the State of JS

    Part 2 of Wes and Scott React to the State of JS

    In this second part episode of Syntax, Wes and Scott continue talking about the 2021 State of JavaScript survey: mobile and desktop libraries, testing, monorepo, runtimes, flavors of JavaScript, and more!

    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.

    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.

    Freshbooks - Sponsor

    Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    Electron !== Security - bezpieczeństwo w aplikacjach desktop'owych

    Electron !== Security - bezpieczeństwo w aplikacjach desktop'owych
    Najpopularniejszy ( jedyny ? ) sposób na tworzenie aplikacji desktop'owych w JS to Electron. Niestety, wbrew pozorom wrzucenie stworzonej wersji webowej do Electron to nie jest najlepszy pomysł...

    Rozmawiamy na temat bezpieczeństwa w Electron. Nasza krótka przygoda z Electron'em zupełnie nas nie zaskoczyła i na szczęście szybko się skończyła.

    Zapraszam do wysłuchania nowego odcinka.

    TRANSCRIPT: aed2a31edc5d4893a737b77b3dbe1298

    157: Cross-Platform Development with Ionic and Capacitor

    157: Cross-Platform Development with Ionic and Capacitor

    Ionic has focused on Angular for many years, but the recent move to Web Components has opened up new and exciting framework agnostic possibilities. Leon, Danny and Justin talk to Mike Hartington from Ionic about this and a new project called Capacitor a cross-platform API for building desktop, mobile and progressive-web apps.

    Visit the website for This Week in Web, resources & more: https://thewebplatformpodcast.com/157-crossplatform-development-with-ionic-and-capacitor

    Follow The Web Platform podcast on Twitter for regular updates @TheWebPlatform.

    Large Scale GraphQL

    Large Scale GraphQL

    Large Scale GraphQL. Wat is het en hoe implementeer je zoiets bij een grote organisatie? Daar gaan Koen en Jette het in deze aflevering uitgebreid over hebben met twee van onze eigen Capi’s. Zo vertellen Martin van Toorn en Jeroen Hammann vanuit hun ervaring bij de Albert Heijn, alles over dit onderwerp. We gaan het o.a. hebben over, waar GraphQL vandaan komt, het verschil tussen Rest en GraphQL, cashing en meer.

    Info [capi]cast
    www.capicast.nl
    Info [code]capi
    www.codecapi.nl

    Socials
    LinkedIn
    Instagram
    TikTok

    Выпуск №39: Привет, Svelte! Пока, moment.js!

    Выпуск №39: Привет, Svelte! Пока, moment.js!
    написал виджет на Свелт и доволен https://habr.com/ru/company/citymobil/blog/504270/ TS in Svelte https://svelte.dev/blog/svelte-and-typescript Новый пропозал про правильную дату https://tc39.es/proposal-temporal/docs/cookbook.html Добавляем https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat как и что подсвечивать https://buttondown.email/hillelwayne/archive/syntax-highlighting-is-a-waste-of-an-information/ Apple declined to implement 16 Web APIs in Safari due to privacy concerns https://css-tricks.com/apple-declined-to-implement-16-web-apis-in-safari-due-to-privacy-concerns/ Displaying the Current Step with CSS Counters https://css-tricks.com/displaying-the-current-step-with-css-counters/ Пики: Порядок отрисовки https://abandonedwig.info/blog/2020/07/03/css-painting-order.html Introduction to Node.js https://nodejs.dev/learn ШРИ 2019-2020 https://www.youtube.com/playlist?list=PLKaafC45L_SRoYnuEW5cgqHN-kpSTVfMs Хак чтобы сделать любой HTML в MD (например в ридми гитахаба) https://medium.com/@omrilotan/rich-html-in-github-readme-bfb3de791441