This presentation provides an introduction to Toddler, a ClojureScript library designed for building frontend user interfaces. The speaker details Toddler's philosophy, emphasizing its focus on layout control (specifically opposing full-body scroll), internationalization, date/number formatting, and providing common UI elements, while intentionally omitting opinions on state management or styling. The talk covers the library's structure (core, UI components, icons), demonstrating how to set up a project using the Toddler template. A live coding session walks through building a sample application with a header, responsive menu, scrollable content list, implementing Toddler's built-in router, managing component state using React reducers and context, and adding internationalization. Finally, the presentation showcases Toddler's cross-platform capability by building and running the same application on an Android simulator using Tauri.
Toddler: A ClojureScript Library for Frontend Development
00:00:09 Introduction & Agenda: Overview of the talk covering Toddler's features, project setup, a live coding walkthrough (layout, routing, list component, internationalization), and an Android deployment demonstration.
00:01:36 Toddler Overview: Toddler is presented as a significant library (not a framework) focused on frontend components, layout control (screen-aware, opposing full-body scroll), internationalization, and formatting, featuring a built-in router.
00:06:07 Cross-Platform Ambition: Toddler aims for web, mobile, and desktop availability, currently leveraging Tauri for mobile/desktop deployment.
00:07:00 What Toddler Is Not: It explicitly avoids dictating state management, data fetching logic, or styling methods, offering flexibility to developers (Shadow CSS recommended for styling).
00:08:27 Codebase Structure: Toddler core (~8k lines) provides hooks and functions for layout, routing, i18n, etc. Toddler UI (~4k lines) offers ready-to-use components (fields, tables). Toddler Icons provides a large, tree-shakable collection of SVG icons.
00:14:11 Walkthrough Goal: To build a sample application featuring a header, navigation menu, content area with a list, and buttons for internationalization and menu toggling.
00:14:53 Project Setup: Demonstrates creating a new Toddler project using a template command (clj -X:new :template toddler ...), which sets up the basic structure and dependencies.
00:16:49 Development Start & Initial App: Shows how to start the development server (npm start) and explains the initial wrapper components provided by the template (Router, Window Provider, UI Components, Popups, Local Storage for theme/locale, Landing Page).
00:23:30 Routing Implementation: Introduces Toddler's routing system using rlink wrappers to define the routing tree and conditionally render components based on the current route. Explains segments, IDs, and landing priority.
00:31:15 Building the App Layout: Live coding demonstrates creating header, menu, and content components, positioning them absolutely using dimensions derived from the WindowProvider context, avoiding full-body scroll.
00:34:15 Dynamic Menu Creation: Builds a recursive menu component that reads the routing tree from the router context and uses the useGoTo hook to handle navigation clicks.
00:37:34 Creating a Scrollable List: Implements a list component displaying multiple items, initially without scrolling.
00:39:03 Adding Custom Scrollbars: Introduces simplebar-react for consistent scrollbars and uses Toddler's ContainerDimensions provider to make the list area scrollable within its container.
00:41:28 Advanced List Item & Element Sizing: Styles the list items and introduces the useDimensions hook to track the size of specific elements (like the list item itself) for potential size-dependent logic, independent of window resizing.
00:47:06 Header Implementation: Adds icons (from Toddler Icons) to the header and uses CSS flexbox (via helper classes) to position them.
00:48:08 State Management for Mobile Menu: Discusses the challenge of child components updating parent state and introduces the chosen approach using React's useReducer hook.
00:50:12 Reducer and Context Pattern: Implements a reducer using Clojure multi-methods for handling different actions (toggle menu) and provides the dispatch function via React context to children, preventing unnecessary re-renders.
00:55:56 Responsive Menu Logic: Modifies the menu and content components to adjust their layout and visibility based on screen width (mobile breakpoint) and the menu's open/closed state managed by the reducer.
00:58:48 Internationalization (i18n): Adds translation data (keywords mapped to strings in different languages), uses the t/translate hook (which reads the current locale from context) in components, and implements a locale switching mechanism.
01:02:32 Building for Android with Tauri: Demonstrates the steps to run the Toddler web application as a native Android app: port forwarding for the dev server, initializing the Tauri Android environment (npm run android init), and starting the development build (npm run android dev).
01:05:02 Android Simulator Demo: Shows the application running successfully on the Android simulator, confirming that routing, layout, state management, i18n, and hot-reloading work as expected.