Build the future of communications.
Start building for free

svelte posts

  • By Stephenie Minami Nakajima
    Beginner’s guide to Svelte - From basics to state management and animation Beginner's guide to Svelte

    Background

    Svelte is a JavaScript front-end framework that has been getting a lot of attention in recent years. Svelte was chosen as the most loved tool by developers in the Stack OverFlow Developer Survey 2021. In this tutorial, we’ll introduce Svelte’s basic development methods, as well as advanced topics such as state management and animation.

    Goal

    Learn the basics of Svelte, as well as some advanced development methods, by creating a task management application as shown below.


    Demo of the task management application. The user fills out a form asking for their first and last name. After filling out their name, the user deletes multiple tasks, creates new tasks using the task manager application.

    What’s Svelte?

    Svelte is an open-source front-end framework for creating interactive user interfaces that run in a browser.

    Differences with React and Vue.js

    Svelte, like React and Vue.js, is a component-based JavaScript framework for creating user interfaces.

    However, there is a crucial difference between Svelte and React or Vue.js. Svelte doesn’t use virtual DOM. Svelte is a compiler written in TypeScript that compiles JavaScript at build time, whereas React and …

    Read More
  • By Stephenie Minami Nakajima
    はじめてのSvelte - 基礎から応用まで はじめてのSvelte - 基礎から応用まで

    背景

    JavaScriptのフロントエンド開発に関わる技術は移り変わりが目まぐるしく、日々新しいツールやフレームワークが誕生しています。Svelteも近年注目を集めているフロントエンドフレームワークの一つです。2021年のStackOverFlowの開発者サーベイでは、Svelteが開発者から最も愛されているツールとして選ばれました。本稿では、Svelteの基礎的な開発方法から、Storeを使った状態管理やアニメーションの適用方法など、応用までご紹介します。

    目標

    このチュートリアルを最後まで進めると、Svelteの基礎から応用までを学べるとともに、以下のようなタスク管理アプリを作成できます。

    アプリ完成イメージ

    Svelteとは?

    Svelteは、ブラウザ上で動作するユーザーインターフェースを作成するためのオープンソースフレームワークです。

    ReactやVue.jsとの違い

    SvelteはReactVue.jsと同様に、ユーザーインターフェースを作成するためのコンポーネントベースのJavaScriptフレームワークです。

    しかし、SvelteとReactやVue.jsには決定的な違いがあります。Svelteは仮想DOMを使用しません。SvelteはTypeScriptで書かれたコンパイラであり、ビルド時にJavaScriptをコンパイルするのに対し、ReactやVue.jsは実行時に仮想DOMを使ってアプリケーションコードを解釈します。

    Svelteとほかのフレームワークの違いについて詳しくは、ブログ記事「SvelteとReactの基本を比較」を参照してください。

    Svelteを使う …

    Read More
  • By Ashley Boucher
    How to Dynamically Render Svelte Components and Avoid Annoying If-Statements dynamicrendersvelte.png

    Consider this scenario: Your blog is running on Svelte, and throughout the blog you display different lists of posts. You have two different types of list formats that you use:

    • On your blog’s main page, you show a list of all your posts with the post title and a summary.
    • On a given post’s page, you show a list of related content with only the posts’ titles and thumbnails.

    Right now, you have a component called AllPosts that loops over every post in the list and renders a child component called Post for each individual post. You pass a prop from AllPosts to Post indicating what format the individual post should take.

    Inside Post, you’re using an if-statement to render the post differently, depending on the prop value. Your code might look something like this:

    <script>
      export let post;
      export let postType;
    </script>
    
    {#if postType == 'preview'}
      <div …
    Read More
  • By Ashley Boucher
    Build a Chat App with Twilio Conversations and Svelte chat-svelte.png

    In this article you will learn how to build a chat app using the Twilio Conversations API and the Svelte JavaScript framework. The Conversations API gives you the power to create chat apps that bring your users together over multiple channels: chat, SMS, WhatsApp.

    This API is the next incarnation of Programmable Chat, which will be sunset in 2022.

    Prerequisites

    To get started with this tutorial, you’ll need the following:

    • Node.js installed on your machine, along with a package manager like npm or yarn
    • A free Twilio account (sign up with this link and get $10 in free credit when you upgrade your account)

    The Structure of the Chat App

    How to handle the backend

    This app has both a frontend and a backend. The backend is used to generate an Access Token that you’ll need to request from your frontend in order to make use of the …

    Read More
  • By Ashley Boucher
    SvelteとReactの基本を比較 Scelte vs React

    この記事はTwilio Developer VoicesチームのAshley Boucherが執筆したこちらの記事(英語)を日本語化したものです。

    JavaScriptフレームワークについて語る時、Svelteは新顔です。これまでよく噂を耳にしてきましたが、今回試用し、Reactと比較します。

    この記事では、SvelteとReactの違いについて検討し両方のフレームワークを用いて基本的なアプリを構築する方法を紹介します。目標は、以下を取り扱う、中心的概念をデモンストレーションすることです。

    • 構造化コンポーネント
    • 初期化ステート
    • propsの受け渡し
    • ステートのリフト
    • イベントリスナー
    • 動的なスタイル

    さらに、条件付きレンダリングライフサイクルメソッドなど、他にも話すべきトピックは多数ありますが、この記事では基本に焦点を置き、その中で私の感想も述べていきます。

    前提条件

    このチュートリアルを開始するに当たり、以下のツールと技術が必要です。

    Svelte対React

    SvelteとReact.jsは、Webアプリケーション開発向けかつ、コンポーネントベースのJavaScriptフレームワークです。この2つの間の主な違いは、Svelteは仮想DOMを使用しないことです。Svelteはビルド時にコードをプレーンなJavaScriptにコンパイルするのに対し、Reactは実行時にコードを解釈します。

    以下は、Svelt …

    Read More
  • By Ashley Boucher
    Let Users Share Their Online Status in Your App with Express, Svelte, and Twilio Sync syncsvelte.png

    Twilio Sync is the very cool technology that underpins other Twilio APIs, such as Twilio Conversations. It allows you to add cloud-stored shared state in your app, opening up totally new opportunities for real-time collaboration and connection.

    In this article, you’ll be learning how to use Twilio Sync in conjunction with Svelte and Express to show who’s online in your app.

    Prerequisites

    Before you get started with this tutorial, make sure you’ve got the following:

    Set up your app and environment

    This app has two parts: a frontend and a backend. The frontend is the part of your app that your users will actually interact with. Your frontend will use the Twilio Sync JavaScript SDK, which requires a special Access Token in order …

    Read More
  • By Ashley Boucher
    How to Use Svelte Stores to Share Data Between Components svelte stores

    In this article, you’re going to learn about Svelte stores - Svelte’s mechanism to share state and data between different, unrelated components - by building a very basic shopping app as an example.

    When building React applications, you might use something like Redux to share state outside the component hierarchy, or for simpler applications, you might “lift state” to share data between sibling components.

    Svelte stores are a built-in functionality that enables you to manage state in a more graceful way.

    Prerequisites

    To follow along with this tutorial, you’ll need the following:

    • Node.js installed on your machine
    • Some basic familiarity with component based JavaScript front-end frameworks

    Set up your Svelte app

    Open a command prompt or terminal window and run the following commands to clone a Svelte template, install any required dependencies, and start your local server (on port 5000):

    npx degit sveltejs/template svelte-stores-demo
    cd svelte-stores-demo
    npm install
    npm run …
    Read More
  • By Ashley Boucher
    Send an SMS with Svelte and Twilio Functions sveltesms.png

    In this article you’ll learn how to send an SMS from your Svelte app. Because Svelte is a client-side framework, you’ll need to have a backend server that can handle sending the message, otherwise your Twilio credentials would be exposed. For this, you’ll create an API using Twilio Functions.

    To demonstrate these concepts, you’ll build a Svelte app with a button. When the button is clicked, a POST request will be made to your API. The API will send a message and then return a response back to your Svelte app.

    Prerequisites

    In order to follow along with this tutorial, you’ll need these tools and technologies:

    • npm or yarn
    • Node.js installed on your machine
    • If you’re using VS Code, you might want to snag this Svelte extension
    • A free Twilio account (if you sign up with this link, we’ll both get $10 in Twilio credit when you upgrade!)
    • A …
    Read More
  • By Ashley Boucher
    React vs. Svelte: Comparing the Basics svelte vs react.png

    When it comes to JavaScript frameworks, Svelte is the new kid on the block. I’ve been hearing a lot of buzz about it, so I decided to give it a try and see how it feels compared to React.

    This article is going to talk a little bit about the differences between Svelte and React, and then show you how to build a basic app with both frameworks. The goal is to demonstrate a few core concepts that cover:

    • Structuring components
    • Initializing state
    • Passing props
    • Lifting state
    • Event listeners
    • Dynamic styling

    There’s a lot more to discuss, including conditional rendering, lifecycle methods, and other cool concepts, but for this article I’ll focus on the basics and give my gut check feeling along the way.

    Prerequisites

    To get started with this tutorial, you should have the following tools and technologies ready to go:

    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.