DOCSEARCHbyAlgolia
Submit Docs

san

repository·master·Indexed 26 days ago

https://github.com/baidu/san

A fast, portable, and flexible JavaScript component framework for building modern web applications. Version 3.15.6. Features include a template parser that generates ANode (Abstract Node) structures, APack (ANode compression) for optimized network transmission, and support for two-way binding and directives like s-if and s-for. The ecosystem includes companion libraries for routing (san-router), state management (san-store, san-update), and UI components (santd, san-mui, san-xui).

Tokens
3.5K
Snippets
15
Records
32
Agent score
89%

What's inside san

  1. Overview of ANode Compression (APack)

    master

    ANode compression, known as APack, is designed to reduce the size of compiled template JSON objects (ANodes) for faster network transmission and improved initial loading performance.

    Design Principles:

    • Uses a one-dimensional JS Array as the compressed structure to allow single-pass decompression.
    • Uses a {number}head identifier to denote node types, allowing the removal of all property names from the object.
    • Uses undefined to represent empty values (arrays, objects, etc.) to minimize size.
    • For arrays, the first element is the length, followed by the items.
    • Boolean true is represented as 1, while false is represented as undefined (resulting in an empty compressed array).

  2. Explore SAN Ecosystem and Companions

    master

    SAN provides a variety of companion libraries for routing, state management, UI components, and development tooling:

    • Routing: san-router (supports hash and HTML5 modes)
    • State Management: san-store and san-update (immutable data updates)
    • UI Component Libraries: santd (Ant Design style), san-mui (Material Design style), and san-xui (Baidu Cloud Console style)
    • Development Tools: san-devtools (debugging), san-cli (rapid development CLI), and sanny (VSCode extension)
    • Build & Testing: san-loader (Webpack loader for SFC), san-factory (component instantiation), and san-test-utils (unit testing)

  4. Best practices for using TypeScript with San components

    master

    San provides type support that allows defining components without explicit types, but for better development experience, the following patterns are recommended:

    1. Consistency: Use a consistent component definition method throughout your project.
    2. Data Definition: Define the component's data before defining the component itself.
    3. Using defineComponent:
      • To define component methods, use defineComponent<DataT, ICmpt>.
    4. Using extends:
      • When extending the base class, use extends Component<DataT> to define the component.

  6. Run the todos-amd example using an HTTP server

    master

    To view the todos-amd example, serve the directory using an HTTP server. You can use Python's SimpleHTTPServer to host the files locally.

    1. Run the server command.
    2. Open your browser and navigate to http://localhost:8888/.
    $ python -m SimpleHTTPServer 8888

  7. Build and serve the todos-esnext production files

    master

    To create a production build, run the build script. After building, you can serve the contents of the dist directory using a static server like serve on port 9999 and access it at http://localhost:9999/.

    $ npm run build
$ type serve >/dev/null 2>&1 || npm i -g serve
$ serve dist -p 9999

  8. Include San via CDN

    master
    You can include the San library in your project by adding a <script> tag pointing to the Baidu CDN. Depending on your security requirements, you can use the standard HTTP version, the HTTPS version, or the uncompressed source version.

  9. Quick Start with SAN

    master

    To create a basic application, use san.defineComponent to define your component's template and logic, then instantiate it with data and call .attach(element) to mount it to the DOM.

    <!DOCTYPE html>
<html>

<head>
    <title>Quick Start</title>
    <script src="https://unpkg.com/san@latest"></script>
</head>

<body>
    <script>
        const MyApp = san.defineComponent({
            template: `
                <div>
                    <input type="text" value="{=name stuck=}">
                    <p>Hello {{name}}!</p>
                </div>
            `
        });

        let myApp = new MyApp({
            data: {
                name: 'San'
            }
        });
        myApp.attach(document.body);
    </script>
</body>

</html>