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

types-ui

v0.0.10

Published

###Disclaimer this readme is a partially joke, and contains a lot of hype. (It is written basing on the one in Saphire(framework which I used for inspiration)

Downloads

5

Readme

#Types UI

###Disclaimer this readme is a partially joke, and contains a lot of hype. (It is written basing on the one in Saphire(framework which I used for inspiration)

Little has changed in the business application UI development since ... release.

Technologies have changed (GXT, Angular, React, etc.), but fundamentals remain the same. The developer must choose which components to use, how to lay those components out, how to store the data being edited and how to synchronize the model with the UI. Even the best developers fall into traps of having UI components talk directly to other UI components rather than through the model. Inordinate amount of time is spent debugging layout and data-binding issues.

Types UI aims to raise UI writing to a higher level of abstraction. The core premise is that the basic building block of UI should not be a UI component, but rather a property editor.

Unlike a component, a property editor analyzes metadata associated with a given property, renders the appropriate widgets to edit that property and wires up data binding. Data is synchronized, validation is passed from the model to the UI, content assistance is made available, etc.

This fundamentally changes the way developers interact with a UI framework. Instead of writing UI by telling the system how to do something, the developer tells the system what they intend to accomplish. When using Types UI, the developer says "I want to edit LastName property of the person object”.

When using widget toolkits like GXT, the developer says "create label, create text box, lay them out like so, configure their settings, setup data binding and so on". By the time the developer is done, it is hard to see the original goal in the code that's produced. This results in UI that is inconsistent, brittle and difficult to maintain.

##First, The Model

Describe semantics of the data that UI will edit using RAML annotations

##Layer Models

Combine information from multiple models into an integrated model. Bring together information from many files.

##Stuff to Forget About

Start making a list of stuff that you can now forget about... Creating and laying out widgets. listeners, events and how not to end up in an infinite loop. data binding etc…

##Other UI Toolkits

Currently only Bootstrap presentation is available, but Types UI definitions are not tied to a particular toolkit. Other presentations such as React, GXT, Vaadin are possible in the future either from this project directly or from adopters.

##Next, The UI

Describe how to present the model in UI in via a simple YAML file and let Types UI handle the rest. Embed Types UI anywhere you can create an HTML Element.