Creating a responsive multithreading Website for Desktop & Mobile
Content
- Introduction
- The Problems
- The Solution
- Welcome to the neo.mjs v1.3.0 Release
- Is this App a PWA?
- The Website Source Code
- Live Demo
- Can we get a Tutorial on creating this App?
- What is coming next?
- Final Thoughts
1. Introduction
Please take a look at the Intro Video first, to get the idea:
2. The Problems
You might know the feeling: You create a new GitHub repository and start with a default GH Pages implementation using a default GH design skin. You add more and more content, and suddenly it looks like this:
To be fair, it was just an Online Examples collection and not a real Product Website, but you will agree that this one hurts your eyes. It is not helpful for developers who discover the neo.mjs project for the first time.
The next problem was, that a full Blog Post collection was hidden inside the repository (projects/14).
The probably biggest problem was, that until now the neo.mjs UI framework did not have a single Example App, which was polished for Mobile Devices.
3. The Solution
The boundaries for Web based Apps & Websites are getting smaller and smaller. Thinking back on my time working for Sencha, many devs complained about, that the Website was not created using Ext JS (or at least the core version of it).
So, for me the challenge was to create the new neo.mjs Website using the neo.mjs UI framework and making it responsive. Meaning: Fully polished for mobile as well. In case you looked close at the video, you might have seen that there are more than 25 transitions in place, to make it feel more natural when switching between Desktop & Mobile resolutions.
While I am most definitely not a professional designer, I like this new version a lot. Especially the Item Previews contain a lot of CSS magic, like mixing a background gradient with a background image to create a better contrast.
4. Welcome to the neo.mjs v1.3.0 Release
As you can see, the v1.3.0 is mostly focussed on the new Website, to give new visitors who discover the project for the first time a more pleasant experience.
A lot of effort went into the new intro texts (Home Tab) as well.
As mentioned inside the title: The Website App is using the full worker setup (4 CPUs / Cores). Most parts of the framework and the entire Website code base is inside the App worker:
Otherwise, this release mostly contains bugfixes & polishing on the framework level itself.
5. Is this App a PWA?
Almost. More precisely:
This is as close as I can get to a Progressive Web Application at this point.
2 items are missing:
A manifest file. This one does not really make sense, until the project has a logo, since you need App Icons for different resolutions, in case you want to save the App into your mobile home screen.
As mentioned before: I am not a professional designer, so I should better not even try it. In case you got a good idea:
We can definitely add a logo sponsor link into the main repository readme, in case someone creates a logo which will get used.
The second missing item is a service worker. We can definitely add one at a later point in time.
6. The Website Source Code
The entire neo.mjs code base including all examples & demo Apps is open sourced (MIT licensed). The new Website is no exception. You can review the code or use it as a starting point, in case you want to create your own responsive neo.mjs App.
Source code:
https://github.com/neomjs/neo/tree/dev/apps/website
SCSS files:
https://github.com/neomjs/neo/tree/dev/resources/scss/src/apps/website
7. Live Demo
You can find the final version here:
You can run it inside the dist/development or real development mode as well. The Links are inside the matching Examples Tabs.
8. Can we get a Tutorial on creating this App?
Creating in depth tutorials require a big amount of time. In case the related ticket does get at least 20 upvotes, I will gladly do it.
https://github.com/neomjs/neo/issues/915
Sounds fair?
9. What is coming next?
I will create a new project for the v1.4 release very soon. As mentioned inside the new Intro Texts: you can influence the current roadmap. Just add comments to existing tickets or create new ones as needed.
I am thinking about the drag&drop implementation, in App Dialogs or the Buffered Grid (Table View) at the moment.
10. Final Thoughts
I hope that at this point you got an idea about the scope of neo.mjs as well as the potential moving forward.
neo.mjs is an Open Source project (the entire code base as well as all examples are using the MIT license).
Meaning: you can use it for free.
It will stay like this.
However, the project is in need for more contributors as well as sponsors.
A lot(!) more items & ideas are on the roadmap.
If you want to contribute to a lovely Open Source project, this would be highly appreciated.
In case the project has or will have business value for your company: signing up as a sponsor can allow me to put more time into it, resulting in a faster delivery time for new things.
Best regards & happy coding,
Tobias
