Laravel & Sapper (Phần 2) – Sapper có gì?

Tram Ho

Để tiếp nối bài viết về Svelte. Trong bài này, chúng ta hãy cùng tìm hiểu về Sapper. Đây chính là framework của Svelte.

Đầu tiên là Cấu trúc thư mục của 1 Sapper project. Chúng ta sẽ đi tìm hiểu cấu trúc này và xem Sapper liệu có gì hay ho không nhé 😉

1. package.json

Tương tự Vue, React, đây là file config các thư viện cần sử dụng.

Lưu ý: Thêm dòng "private": true vào file để sửa warning package.json: No license field.

2. src

src/client.js

File này sẽ import thư việnsapper để sử dụng cho web

Các hàm api client sapper gồm:

  • start({ target })

    • target – một page element
    • return Promise

    Hàm config router và starts the app – lắng nghe các sự kiện của thẻ <a>, interacts với history API, render và updates các components.

    Ví dụ

  • goto(href, options?)

    • href — the page to go to
    • options — not required

    Hàm xử lý điều hướng trang khi người dùng click vào thẻ <a> có href tương ứng và trả về một Promise

  • prefetch(href)

    • href — the page to prefetch

    Prefetch trang khi người dùng click phần tử <a> có rel=prefetch.

  • prefetchRoutes(routes?)

    • routes — an optional array of strings representing routes to prefetch

src/server.js

File này sẽ xử lý việc connect web với server.

Sapper sử dụng thư viện Polka, là một native HTTP server, tương tự như axios, thư viện này sẽ hộ trợ việc gọi api bên phía server.

Ví dụ

template.html

Đây là một file template cho response trả về từ phía server. Sapper sẽ inject content vào trong file khi có response trả về.

src/routes
Khác với Vue, React, đây là thư mục gồm các trang của ứng dụng. Route được định nghĩa bởi cấu trúc và filename của các pages.

3. stattic

Folder chứa các file bất kì, như images, favicon,…

4. rollup.config.js / webpack.config.js

Đây là file cấu hình ứng dụng, tương tự Vue và React

5. Systax Svelte component

Mỗi svelte component cho gồm 3 phần:

  • code elements
  • code style: khai báo bằng thẻ <style>
  • code script: Khai báo bằng thẻ <script>

Cấu trúc 1 file svelte tương tự Vue, tuy nhiên, svelte k cần khai báo element trong thẻ <template> như Vue

Ví dụ:

Svelte có cú pháp khai báo script tương tự Vue, nếu bạn từng sử dụng Vue thì việc học Svelte càng đơn giản

Như giới thiệu thì Sapper là một Nextjs type, nên với các bạn đã tiếp xúc nhiều với các framework thì Sapper có vẻ như không có gì đặc biệt. Trong bài tiếp theo mình sẽ tìm hiểu kĩ hơn về xử lý render DOM của Svelte. Hi vọng là sẽ có điều gì đó thú vị.

Tài liệu tham khảo:
https://sapper.svelte.dev/docs

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo