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

ng-foundry-models

v0.0.14

Published

Interactive 2D/3D library for designed for the collaborative construction of semantically correct diagrams and drawings.

Downloads

20

Readme

ng-Foundry-models

Interactive 2D/3D library for designed for the collaborative construction of semantically correct diagrams and drawings.

Great visualization tools exist in open source for charting and diagraming (d3.js, three.js). ngFoundry is a programmatic approach to creating diagram with a focus on preserving the semantics of the model to be visualized. This is enforced during user interaction and programmatic queries.

A Metadata Always approach allows for storage of design intent within executable code. Metadata can be transferred between computers in real time to synchronize the actions of multiple systems

ngFoundry is a TypeScript/Angular implementation. The library is a series of well factored JavaScript classes engineered to represent components of semantic models of real worlds systems using a common vocabulary. Components, Attributes, Relationships, Notifications and Instances are all first class objects in ngFoundry, along with the supporting knowledge structures like Concepts, Properties and Conditional Assemblies. First class objects including Shape1D, Shape2D, Shape3D, ConnectionPoints, Glue and Collections make diagrams progrmatially explicit

ngFoundry mashes together computer science ideas from Object Oriented, programming, Functional programming, the Actor model, and reactive programming to create it approach to modeling real world system.

  • Designed for Collaboration
    • internal events and messages implemented using Rxjs
    • external events using web sockets implemented using SignalR
    • json structures for metadata, model, and diagram sharing
  • Designed for Semantic interaction and enforcement
    • extendable TypeScript classes allows for extension / substitution of modeling language
    • internal Lifecycle events to monitor changes and create reactive behaviors
    • metadata first modeling with explicit knowledge classes to manage schema and definitions
    • dynamic model referencing syntax to locate and engage parents and sibling elements
    • computation engine to manage changes in model state and composition
  • Designed for the Web and Desktop (cross-platform)
    • rich 2D interaction system using html canvas
    • 3D models and interaction to visualize real world behaviors
    • Https / Rest integration to simplify connectivity to existing systems
    • build using web standards and state of the art open source projects
  • async is the primary mode on communication, embrace it
  • Lessons learned from previous implementations
    • the Foundry Library (originally developed in c#, Rx, Visio, Xaml)
    • a simple set of shape operations (create, destroy, connect, disconnect, set, get and change) exist in every model
    • use the system to build itself. Model first approach, using programming to promote behavior that supports assembly not drive it
    • automated testing insures quality and help you discover model weaknesses

Final thought

As an engineer practicing in the early days of computer programming, I was always disappointed that computer languages were created to procedurally execute instructions, and not semantically describe scenarios declaratively and optimize the outcome. I have learned that writing software is a process of primarily listening and coding toward the truth. I believe visualization and collaboration leads to a deeper understanding of a problem and the people you are working with to build a solution.

After 40 years of writing software I understand deeply why this must be true, but there is still a part of me that hopes by creating language elements that let non-programmers declarative describe their domain using their own vocabulary the task of creating software can become use error prone

Instructions for building and running ngFoundry yourself

This project was generated with Angular CLI version 1.0.0.

Development server

Run ng serve -o for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

#Interesting links for reference

http://nicholasjohnson.com/blog/how-angular2-di-works-with-typescript/