npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

typed-panels

v0.0.2

Published

UI Framework that starts to think at the interface and ends at the models.

Downloads

7

Readme

Typed Panels

Typed Panels is a Javascript framework written entirely in TypeScript which tries to make you look at an web application in an entirely different way. It focusses on atomic functionality in your interface and let's you group, reuse and shuffle it all over the UI without you as a developer only ever having to worry about where to put it, and not how to put it somewhere. Check out the Wiki

Download

Download the latest versions from the dist/ directory or download the point releases here:

Should I use it?

You should consider this framework when you're:

  • Creating a (Rich) Web Application
  • Considering or beginning to use TypeScript
  • Require a consistent UI
  • Want to worry less about maintainability of your UI and want to build it in as little time as possible
  • Miss the LINQ (or other DSL for objects) and Generics you had in your Server side language and want to reuse that knowledge
  • Using or want to use Underscore templates or other client side templating languages

More on when to use Typed Panels

Layout and Functionality First

This framework may require a different way of thinking about your User Interface. The purpose of this framework is to help you build your frontend as in reusable components and with as little coupling between those panels as possible. With relations only going from top to bottom. This way you can basically throw any component anywhere in the interface, as long as you provide it with the data it needs to render that UI. It takes the idea behind Backbone.js (Which it is inspired by from a code perspective) and leverages the power of TypeScript to stick with those ideas and not end up with the same giant mess of code that you had before you ported everything to Backbone. (I have seen it happen multiple times.

This is also the idea behind this framework; Do more, in less time, and only do it once.

Learn More

Examples

Here are the four absolute basic components neede to build an Web Application with Typed Panels. Check out our other samples to get a better understanding of the power of the LINQ bindings, more advanced models, automatically compositing UI Grids, Animations with Viewport Managers, etc.

Super simple (view)models

Using the strength of TypeScript models are super easy to setup and above all use. A model can be as simple as the example below;

class BookModel extends Model.ViewModel<BookModel> {
    public id: number = null;
    public Title: string = null;
    public Author: string = 'John Doe'; // Set an default value
    public ISBN: string = null;

    constructor(options?: Model.ViewModelOptions){
        // Make it load from this Rest URL (Web API, WCF, Ruby, PHP.Rest backend, ...)
        super('/api/books', options);
        // Makes all the properties above getters and setters making them act like properties as in C#
        this.RefreshModelProperties();
    }
}

After a model is created you can subscribe to events on that model to react on change in the model or other UI elements that update the model.

Panels

Panels are atomic pieces of functionality or pieces in the UI that display some form of data, or just some generic markup. They contain as little HTML markup and DOM manipulation operations as possible themselves, and try to offload that type of tasks to the templates wherever possible.

class BookPanel extends Panels.ModelPanel<BookModel> {
    public Render(): void {
        // This renders the model (this is called a Panel State in TypedPanels) with the Underscore template 'bookview.html'
        return this.RenderModel('bookview');
    }
}

Familiar views

Using any client side Templating language/library you can display the data in your model. In this example the book get's displayed in a jumbotron from Bootstrap using the (default) Underscore/Lodash templates.

<div class="container-fluid">
	<div class="jumbotron">
	  <h1><%- Title %></h1>
	  <h2><%- Author %></h2>
	  <p><%- ISBN %></p>
	  <p><a class="btn btn-primary btn-lg" role="button">Buy *all* the books</a></p>
	</div>
</div>

Panel Groups

These panels are managed in Panel groups. These groups are what position the panels, and thus functionality in the interface. They manage Animations, make it super easy to create Tabs and other grouping operations in your UI. They make up the Layout of your application. The concept of Panels and Panel Groups ar the core of an application built with the Typed Panels framework. The example below creates one of the simplest panels in the framework and adds an instance of our book Panel inside of it, then renders all of it. Normally you would place this kind of code in an Single Entry point like an Application class.

// Initialize the model for our panel
var book = new BookModel();
// Either: Just like in Backbone.js
book.fetch();
// OR: manually fill it
book.Title = 'Macbeth';
book.Author = 'William Shakespeare';
book.ISBN = '978-0-000-00000-1';

// Create the panel
var panel = new BookPanel(book);

// Initialize the panel group
var group = new Panels.Groups.TabbedPanelGroup();
group.AddPanel(panel);

// Render the UI
group.Render();
panel.Render();

// Add it to the DOM
$(body).append($('<div class="panel-wrapper">').append(group.PanelElement));