Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
neo.mjs - npm Package Compare versions
Comparing version 1.0.11 to 1.0.12
@@ -57,2 +57,3 @@ # neo.mjs: Getting Started Guide | ||
| Copyright (c) 2015 - today, Tobias Uhlig & Rich Waters | ||
| Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a> | ||
| & <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a> |
@@ -27,2 +27,3 @@ # Project history of neo.mjs | ||
| Copyright (c) 2015 - today, Tobias Uhlig & Rich Waters | ||
| Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a> | ||
| & <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a> |
@@ -1,78 +0,141 @@ | ||
| # The neo.mjs story | ||
| # The neo.mjs vision | ||
| In case you take a look at the <a href="https://en.wikipedia.org/wiki/Web_worker">web workers page on Wikipedia</a>, | ||
| you will find the following quote: | ||
| At this point I (Tobias) can not commit to adding dates to the planned items. | ||
| After investing 1.5 years of my full and unpaid working time I am in need to make up on the financial side of things. | ||
| So as long as the project is not properly funded, I can only afford to continue working on it in my spare time. | ||
| **"The simplest use of workers is for performing a computationally expensive | ||
| task without interrupting the user interface."** | ||
| To speed up the current development there are two options: | ||
| 1. Help promoting neo.mjs or jump in as a contributor (see <a href="../CONTRIBUTING.md">Contributing</a>) | ||
| 2. Jump in as a sponsor to ensure I can spend more time on the neo.mjs coding side (see <a href="../BACKERS.md">Sponsors & Backers</a>) | ||
| At this point, all other web-based UI frameworks are still struggling with performance, | ||
| especially in case you are building big apps. There are many hidden background tasks running | ||
| which can slow down your beautiful animations or even worse: single threaded applications can have memory | ||
| leaks resulting in browser-freezes after using them for a while (either the one and only core which is used | ||
| runs at 100% or the memory usage gets too extreme). | ||
| The following items are ***not*** ordered by priority. In case certain topics are important to you, please use the issues | ||
| tracker to create an awareness (like / comment on current tickets or create new ones as needed). | ||
| Looking back at the Wikipedia quote, Rich Waters & I came to the conclusion that the most expensive tasks are | ||
| the framework & the apps itself. | ||
| Thanks for your support! | ||
| So we asked ourselves the question:<br/> | ||
| **"What if a framework & all the apps you build would run inside a separate thread?"** | ||
| * Real World app version 2 | ||
| 1. Version 1 is definitely worth a look to see how to craft custom components and connect to an API, | ||
| but it is not the best starting point to see how to craft an neo.mjs app. Since the requirement was to use a given | ||
| Bootstrap theme, only component.Base is in use (since more advanced components require a neo.mjs CSS theme). | ||
| At this point I recommend to take a look at the Docs app to learn how to craft an neo.mjs app. | ||
| 2. Version 2 is intended to fill this gap and will not use the Bootstrap based theme. | ||
| 3. This allows us to use the full range of neo.mjs components (Toolbar, Button, List, TabContainer, Gallery, Helix, etc.) | ||
| 4. Once this app is finished, it will be the perfect starting point to learn how to use neo.mjs, | ||
| so right now this item has the highest priority for me. | ||
| 5. The RW2 app requires a 3rd neo.mjs theme => based on the conduit styles | ||
| 6. Add the ability to switch themes inside the app | ||
| * Drag & Drop (see <a href="https://github.com/neomjs/neo/issues/16">#16</a>) | ||
| 1. This ticket is definitely an epic, since DD operations happen inside the main thread, while the handlers will | ||
| live inside the app thread. | ||
| 2. Once DD is in place, we can create a real slider component (see <a href="https://github.com/neomjs/neo/issues/18">#18</a>) | ||
| 3. We can create Dialogs (Windows), which can get moved and resized (see <a href="https://github.com/neomjs/neo/issues/15">#15</a>) | ||
| 4. We can create sortable tabs (see <a href="https://github.com/neomjs/neo/issues/23">#23</a>) | ||
| * Docs App version 2 | ||
| 1. I am not planning to re-create the existing app, but enhance it with more features: | ||
| 2. Support for showing mixins inside the class views (<a href="https://github.com/neomjs/neo/issues/99">#99</a>) | ||
| 3. Add tooltips (especially for the Configs, Methods & Events buttons => navigation shortcut) | ||
| 4. Expandable class member items (add the ability to expand or collapse items to make the list shorter) | ||
| 5. Writing more guides | ||
| 6. Enhance the example views: | ||
| 1. The example components should get shown inside a tabContainer: first tab containing the component, | ||
| second tab a source code view of the example | ||
| 2. It should be possible to export the current configs (e.g. 3rd tab, configs as JSON) | ||
| 3. The configuration container should be collapsible (using a sliding animation) | ||
| 4. Add a second tab to the config area to show theme css4 vars and make them changeable | ||
| 7. class member inheritance: when overriding a config or assigning a value to a parent one, the parent config | ||
| should get listed (including its initial value) | ||
| * Build Scripts | ||
| 1. The current scripts work fine inside the neo repository. Since neo.mjs can now get used as a node module, | ||
| enhancements feel necessary. | ||
| 1. An npx create-app script (see <a href="https://github.com/neomjs/neo/issues/90">#90</a>) | ||
| 2. The build-my-apps scripts should work as well, when used outside of the repo (manually hacked this into the | ||
| Real World app version 1) | ||
| * Mobile Support | ||
| 1. Add touch based events (swipe, long-tap, etc.) to the global domListeners | ||
| 2. Split the current events into desktop & mobile and add a Neo.config to choose which ones to use | ||
| 3. Use the events based on the browser feature detection | ||
| 4. Create new components and adjust current ones to better work on mobile | ||
| * Mobile Docs App | ||
| 1. Create a new UI or make the current one responsive | ||
| * Make the Data worker more meaningful | ||
| 1. Right now, the data worker only executes the XHR requests | ||
| 2. Rich originally planned to let stores live inside this thread, but this would create a lot more async logic inside | ||
| the app thread, plus it does not make sense for stores with little data | ||
| 3. What should be possible: for remote stores which need to parse the data getting back from an API, these transformations | ||
| should happen inside the app thread (like a data reader) | ||
| 4. Remote stores with local sorting: this sorting could happen inside the data worker as well | ||
| * Data Package version 2 | ||
| 1. The collection class is already very powerful (needs some polishing though). For the first version of the data | ||
| package, stores were extending collection.Base. Afterwards records were introduced (not instances of data.Model, | ||
| but a super lightweight extension of a JS Object). At this point, stores should no longer extend a collection, | ||
| but use one instance instead (e.g. a collection config). | ||
| 2. More polishing of Sorters & Filters & add the ability for stores to sort & filter per remote (adding params to | ||
| each request). | ||
| 3. Enhance the API for stores: when using a collection, several methods need to get bound to the collection, but | ||
| ensuring that data objects get transformed into records. | ||
| 4. use data fields: each store should exactly use one instance of data.Model. Inside a model, you can define fields. | ||
| Fields should either be a singleton or a class with static methods. We need to provide parsing methods, e.g. toString() | ||
| for a field type "String". | ||
| * Finish the implementation for Tooltips; Rectangle utility class (see <a href="https://github.com/neomjs/neo/issues/51">#51</a>) | ||
| * Finish the implementation for form.field.Chip (see <a href="https://github.com/neomjs/neo/issues/31">#31</a>) | ||
| * Create a coding style guide (see <a href="https://github.com/neomjs/neo/issues/93">#93</a>) | ||
| * Virtual Dom Engine enhancements | ||
| 1. Add a 2nd mode where ids do get ignored (e.g. for comparing content on fixed positions like grid rows) | ||
| 2. Add an option to specify the the tree depth to compare (e.g. only the first level for containers) | ||
| 3. Refactor vdom.Helper: createDeltas | ||
| * Create a buffered Grid | ||
| 1. So far I mostly focused on table.Container. Since tables are not good for buffering (too many layout reflows), | ||
| it is time to pick up the grid.Container implementation again. | ||
| 2. The grid.Container will use divs only. grids need a rowHeight config, since it has to be fixed for buffering. | ||
| 3. Add 1-2 more rows as the visible area can show and adjust the content when scrolling (move the top row div to | ||
| the bottom or vice versa) | ||
| 4. when clicking on the scrollbar, adjust the full grid cell content | ||
| 5. add column reordering via DD (relies on the DD implementation) | ||
| 6. add cell-editing | ||
| 7. add action columns | ||
| 8. add buffering for horizontal scrolling as well | ||
| * Create a Router | ||
| * Enable neo.mjs to run in node | ||
| 1. There are some uses of "self", which work fine inside the main thread & inside the worker scope, but not in node | ||
| * neo.mjs based middle-ware (see <a href="https://github.com/neomjs/neo/issues/19">#19</a>) | ||
| * Enhance the Siesta tests to run inside a node env | ||
| * Write more tests (Epic!) | ||
| * main.mixins.FeatureDetection | ||
| 1. Add meaningful checks for relevant features | ||
| * Create a Website for the neo.mjs project | ||
| 1. Right now, only Online Examples are in place | ||
| 2. The examples need to support mobile | ||
| 3. Intro Texts are needed (see <a href="https://github.com/neomjs/neo/issues/7">#7</a>) | ||
| 4. A Logo for neo.mjs is needed | ||
| * Create a MarketPlace for User Extensions / Custom Components | ||
| 1. for UX which don't fit into the framework repo | ||
| 2. for custom themes | ||
| 3. add the ability for developers / companies to sell their extensions vs a fee (similar to the apple app store) | ||
| * Create a Chrome extension to make the debugging / working with neo.mjs more easy | ||
| 1. see all created stores & their data | ||
| 2. Access to the component manager | ||
| 3. Ability to click on the screen and receive the closest neo.mjs component | ||
| 4. Ability to see the full component tree of your app | ||
| * Use SharedWorker(s) | ||
| 1. Optional | ||
| 2. Once Chrome supports using JS modules inside shared workers | ||
| 3. This will allow us to create ***multi screen apps*** | ||
| 4. Imagine dragging a dialog outside of your browser tab and it appears in another one | ||
| ***TL-BR***: This list is most likely not even complete. | ||
| You don't need to be a genius in math to figure out that this is a massive amount of work. | ||
| If I would create neo.mjs just for myself, there would be no Docs app, no Real World 1 or 2 app. | ||
| I already put in a massive amount of time to enable you to use neo.mjs as well and I don't expect anyone to say thank | ||
| you for doing this (although it is nice to hear :)). | ||
| With this idea, the neo.mjs project was born. | ||
| I would even be willing to continue this project on my own, but I would run bankrupt rather sooner than later without | ||
| funding. So, assuming you know how the romantic idea of Open Source works, let me repeat the first part again: | ||
| We already had a proof of concept running in October 2015, which was using 4 threads: | ||
| 1. Main (Creating the workers, manipulating the real DOM, forwarding UI events to App) | ||
| 2. App (Most parts of the framework & your apps live here) | ||
| 3. Data (Responsible for the BE connections) | ||
| 4. Vdom (Converting the virtual DOM into HTML, as well as calculating delta updates) | ||
| To speed up the current development there are two options: | ||
| 1. Help promoting neo.mjs or jump in as a contributor (see <a href="../CONTRIBUTING.md">Contributing</a>) | ||
| 2. Jump in as a sponsor to ensure I can spend more time on the neo.mjs coding side (see <a href="../BACKERS.md">Sponsors & Backers</a>) | ||
| It was a rough time for workers, since there were no console logs possible. | ||
| Catching errors without any info which file or line number caused it was painful, | ||
| but we got it running in the first version (ES5 based) of the framework. | ||
| The project got a new momentum, once the Chrome flag was released, which made it possible | ||
| to use JS modules directly inside workers (imports). I created a second version of the framework at this point, | ||
| which is now fully based on top of ES8. | ||
| **Obviously, there is a lot more to neo.mjs:** | ||
| We do believe that string based templates need to go away | ||
| 1. Converting strings containing variables and method calls into JSON structures is expensive | ||
| 2. Scoping can be a nightmare | ||
| 3. You are not in control on how templates get parsed (e.g. when you want to change multiple variables) | ||
| 4. Some other frameworks are now parsing templates inside the build processes, which is just working **around** | ||
| the real problem: it limits you to only create simple components with a few states or you can end up with a | ||
| **massive** overhead on the app side. | ||
| Our solution was to use JS based objects / arrays (JSON) for the virtual DOM structure. | ||
| It is kind of obvious, that you can easily manipulate JS objects & arrays any way you want using JS.<br/> | ||
| No more scoping issues.<br/> | ||
| You are in full control when, what and how to change your vdom. | ||
| The neo.mjs vdom structures are not "templates", which get consumed when rendering or mounting a component,<br/> | ||
| but persist throughout the full component lifecycle.<br/> | ||
| Meaning: you can easily change them the same way at any given point. | ||
| Especially when creating big apps, many framework fail to provide you with a robust and solid base structure, | ||
| on which you can build complex UI architectures. Extensibility is another huge issue. | ||
| The neo.mjs config system solves this. You can use configs exactly the same way when passing them first to create | ||
| an instance or later on when changing them. Simplicity at its finest: | ||
| you don't even need to remember setter method names. | ||
| Example: | ||
| ``` | ||
| const myButton = Neo.create(Button, {text: "Hello"}); | ||
| // this will already update the UI and yes, you can do this inside the console as well | ||
| myButton.text = "World"; | ||
| ``` | ||
| For more input on what you can do using neo.mjs, please take a look at the guides inside the docs app. | ||
| # The neo.mjs vision | ||
| content coming soon! | ||
| Copyright (c) 2015 - today, Tobias Uhlig & Rich Waters | ||
| Best regards, Tobias | ||
| Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a> | ||
| & <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a> |
@@ -24,10 +24,2 @@ # Sponsors & Backers | ||
| After finishing the Real World demo app, I am planning to create a 2nd version: this time using a custom neo.mjs design | ||
| theme as well as the full band-width of neo.mjs components: tabContainers, lists, toolbars, buttons etc. | ||
| This should be the perfect starting point for new developers who would like to get up to speed. | ||
| Afterwards I would like to polish the docs app further, as well as writing more tutorials & guides. | ||
| Right now there is a massive amount of hidden gems inside the neo.mjs code base, but I do get the point | ||
| that not everyone of us is a treasure-hunter and loves to explore the code base on his own. | ||
| <h3 align="center">Bronze Sponsors</h3> | ||
@@ -48,2 +40,6 @@ <!--bronze start--> | ||
| # What will I sponsor? | ||
| Obviously the continuing of the development for the neo.mjs framework. | ||
| To get the idea of what this means in detail, please take a look at the: <a href=".github/VISION.md">Project Vision</a>. | ||
| # Why should I sponsor neo.mjs? | ||
@@ -77,2 +73,3 @@ I am in need to make up for the invested time, which means that going forward, | ||
| Copyright (c) 2015 - today, Tobias Uhlig & Rich Waters | ||
| Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a> | ||
| & <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a> |
@@ -8,3 +8,3 @@ This folder contains entrypoints for the webpack based builds. | ||
| Webpack was creating different chunks otherwise, resulting in redundand code for each example & the App Worker. | ||
| Webpack was creating different chunks otherwise, resulting in redundant code for each example & the App Worker. | ||
| Even worse, there were colliding classes (e.g. Neo itself, the IdGenerator etc.) and it felt kind of random | ||
@@ -11,0 +11,0 @@ which target module Webpack was using. |
@@ -12,3 +12,4 @@ # neo.mjs Contributing Guide | ||
| 3. Write blog posts or post on social media (Facebook, LinkedIn, Twitter, etc.) | ||
| 4. Interested to see a neo.mjs session at a developer conference? Definitely possible. Just reach out! | ||
| 4. Please stick to our <a href=".github/CODE_OF_CONDUCT.md">Code of Conduct</a> | ||
| 5. Interested to see a neo.mjs session at a developer conference? Definitely possible. Just reach out! | ||
| 2. Use the issues tracker | ||
@@ -35,2 +36,3 @@ 1. In case you got an idea for a new feature | ||
| Copyright (c) 2015 - today, Tobias Uhlig & Rich Waters | ||
| Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a> | ||
| & <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a> |
| { | ||
| "name": "neo.mjs", | ||
| "version": "1.0.11", | ||
| "version": "1.0.12", | ||
| "description": "The webworkers driven UI framework", | ||
@@ -29,3 +29,3 @@ "repository": { | ||
| }, | ||
| "keywords": [], | ||
| "keywords": ["javascript","frontend","framework","webworker","ecmascript","css","json"], | ||
| "author": "Tobias Uhlig, Rich Waters", | ||
@@ -38,3 +38,3 @@ "license": "MIT", | ||
| "devDependencies": { | ||
| "@fortawesome/fontawesome-free": "^5.11.2", | ||
| "@fortawesome/fontawesome-free": "^5.12.0", | ||
| "autoprefixer": "^9.7.2", | ||
@@ -41,0 +41,0 @@ "clean-webpack-plugin": "^3.0.0", |
@@ -102,3 +102,3 @@ <p align="center"> | ||
| picture.<br/> | ||
| Take a look at the <a href=".github/VISION.md">Project Story & Vision</a>. | ||
| Take a look at the <a href=".github/STORY.md">Project Story</a> and <a href=".github/VISION.md">Vision</a>. | ||
@@ -113,2 +113,3 @@ In case you like the neo.mjs concepts, please take a look at <a href="./BACKERS.md">Sponsors & Backers</a>. | ||
| Copyright (c) 2015 - today, Tobias Uhlig & Rich Waters | ||
| Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a> | ||
| & <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.07%
15828465
- Number of package files
- increased by0.06%
1646
- Number of lines in readme file
- increased by0.89%
113
- Published versions last week
- increased by100%
2
- Published versions last year
- increased by0.91%
111
Worsened metrics
- Published versions last months
- decreased by-25%
3
No dependency changes