Awesome Composi

A curated list of awesome things related to Composi

Official Resources

• Installation
• Docs
• Tutorials
• Source Docs

Contents

• Utilites
• Ajax
• State Management
• Third Party Frameworks
• Articles
• Github Examples
• Codepen Examples
• Contributing

Utilities

• stylor - A module that creates virtual stylesheets for component-scoped styles.
• pubber - A tiny pubsub library for communication between components
• taggers - Module that enabled use of named hyperscript tags as an alternative to JSX.

Ajax

• Native Fetch
• unfetch - A tiny polyfill for Fetch.
• Axios - Similar to JQuery Ajax request.

State Management

• Redux - Redux is a predictable state container for JavaScript apps.
• Mobx - MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.
• GraphQL - GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.
• Apollo - Apollo provides a universal GraphQL API on top of your existing services, so you can build new application features fast without waiting on backend changes.
• State Machine - State Machine is a library for managing a finite set of states, and moving between them via actions and transitions.

Third Party Frameworks

• Material Design Lite - Material Design Lite includes new versions of common user interface controls such as buttons, check boxes, and text fields, adapted to follow Google's Material Design concepts.
• Bootstrap - Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Client Side Routing

Composi does not have its own router. That is beyond the scope of the aim of the project. However, we do have a separate router that we like to use with Composi called composi-router. Example of usage: Tour of Heroes

You could also use any of the following popular client side routing libraries:

• Universal Router
• Page
• Routie
• Routy
• Webix-routie
• Roadtrip
• Jsrouter

Articles

• Composi — A Small & Fast Component Library
• Comparing React and Composi
• Reactive Components in 3KB
• The Power of Extending Component
• Composi & Redux
• Composi & Mobx

Codepen Examples

• Spreadsheet - Simple spreadsheet example.
• Material Design Lite - Buttons, card and dialog box.
• Material Design Lite - Form inputs and list.
• Temperature Converter - Example of lift state up to parent component. This converts between Fahrenheit and Celsius.
• Canvas Clock - A canvas clock created by a component.
• SVG Clock - Swiss style clock using SVG generated by component.
• Calculator - A simple calculator.
• Tic-Tac-Toe - An example of immutable data with time travel.
• Coin Toss - A Coin Toss component, just because we can.
• Dancing Pythagoras Tree - Animated SVG tree using D3.
• Image Browser with Popups - An image browser that lets you popup the images like a light table.
• Hacker News Minimal - A minimal implementation of Hacker New that lets you sort be popularity.
• Tour of Heroes - The famour Angular Tour of Heroes project converted to use Composi. This also uses Routie for client side routing, which conditional loads subcomponents.
• Composi Slideshow - A simple, animated slideshow.
• Rick and Morty - A site to explore Rick-n-Morty cartoon characters.

Github Examples

• Counters - Dynamically add or delete multiple counters and get their total.
• Temperature Converter - Converts temperature between Fahrenheit and Celsius, while showing the boiling point.
• Spreadsheet - A simple spreadsheet solution. You can add or delete items.
• Canvas Clock - A simple animated clock drawn with canvas element.
• Svg Clock - A simple animated clock rendered with SVG.
• Calculator - An example of a basic calculator for addition, subtraction, multiplication and division.
• Todo List - TodoMVC without the MVC. Refactored as a component.
• Tic-Tac-Toe - This shows how to keep component state immutable for time travel.
• Pythagoras Dancing Tree - An animtated SVG tree using D3.
• Image Browser - This is a basic image browser with a popup for closer view of image.
• Hacker News Minimal - This is a minimalistic Hacker News viewer. You can sort by popularity or rest to original order.
• Tour of Heroes - The Angular Tour of Heroes project converted to using Composi, complete with client-side routing to conitionally render components.
• Composi Slideshow - A simple, animated slideshow.
• Rick and Morty - A site to explore Rick-n-Morty cartoon characters.

Contributing

To contribute, fork this repository, add your amazing entry and send us a PR. See CONTRIBUTING for more information.