request for debate and/or advice on an Admin UI template

[B i r n o u]

hello everyone down here...

knowing that on this forum there is a large number of followers (being for or against this and that)... and without wanting to create controversy, but on the contrary a brainstroming of ideas and advice (preferably wise), I would like to solicit the presence of those who want to go there from their comments.

I was wondering the following question... what would today be a suitable tool for interfacing an application interface. The selection criteria being Bootstrap 4, Sass, and if possible NPM

here is the first results of the candidates who caught my attention... are there others? certainly... but I certainly missed it!

• https://themes.laborator.co/xenon/
• https://designreset.com/preview-equation/default/index.html
• http://www.urbanui.com/hiliteui/template/demo/vertical-default-light/index.html

what would be your feedback and will you advise others? which ones (attention meeting the above criteria)

thank you to those who will participate in this discussion and sorry for the others who will be subjected to the noise of such a discussion.

have a pleasant day

birnou

[osgood_]

pziecina  wrote

So if you was to build such a UI, would you agree with Osgood regarding the use of animations, (look at the 3rd example in the original post) or would you look for some other means of 'keeping the user focused', and if so what?

I think some subtle animations can always bring something to the table but in my opinion you should not use them just because they are available. A typical case use for me would be to animate a bar/pie chart - some kind of visual information NOT just make copious amounts of images or boxes of text drift in from the left/right, up/down, spin around and zoom in and out.

[pziecina]

Maybe an example of the type of user focus problem I am talking about.

In such a system, it is not uncommon, (and this is where off-line PWA's come in) for the user to have technical manuals included. So for a common example lets say the manual is the manufacturers service manual for a ford mustang.

We all know from experiance, reading such material can be borring, (to say the least) but the mechanic using the system must read through it. So how would one make the reading more interesting?

Think of the technical drawings, the service requierments, the location of components, and warnings or service problems that must be known, (remember flipping through the pages is not possible). Then lastly as we all know health and safety notices are required, (pop up windows or animated 'info').

[osgood_]

Ben firstly reading between the lines sorry for your loss.

I'm a novice when it comes to admin requirements such as those that need to provide for storing/retreiving 'personal' data etc and much like you the majority of my work only involves some simple CRUD workflows which allows my clients to basically go and add new products, delete, update etc, add news items, vacancies etc.

I know Birnou is heavily influenced by node.js, so I suspect that will serve him well as an excellent choice for multiple requests.

[B i r n o u]

Thank you BenPleysier for your feedback, all my thoughts for you and your family.

as I said in a previous comment, my choice is almost made for https://designreset.com/preview-equation/default/​

I'm currently

I am currently working on the modeling of the information system and the intertable relationship. For the moment I have not yet bought the template, I am testing some aspects before doing it.

I have to go abroad for a week so I would wait for the return to validate the download and start its implementation.

it's true that until now I haven't said too much about the core of the application itself and why I chose to use a template.

like pziecina, for each project until now the team has always developed all the interface components and adapted each flow. For this time, the project has no budget and must present an operational prototype within a few weeks, hence the choice of libraries and templates.

the objective is to be able to model various food platforms with the network of producers, processors, solidarity economies and politicians that this represents.

the system must be designed as an PWA application form (in Admin mode) in order to allow (according to user profiles) to supply the system with information, data, and/or to extract various statistics, define probabilities, (or even a predictive system) and all this mapped to allow a better interconnection between the various platforms.

(food platforms can share producers, producers can be platform too, and so on)

a messaging and various exchange system must be able to target from 1 to n+1 and everything must remain on non-proprietary technos (open street map, mastodont, disapora, humhub, social gnu like...)

the use will remain mainly computer-based for data entry or extraction, but on mobile devices for simple consultation and statistical purposes.

I was thinking of developing a web component panel based on the template (hence the use of Node and Sass for automation purpose) to facilitate its structuring.

Preran​... due to the particular nature of this project (no budget, no internal team (local work, no synology) so no issue for latence et ressources leak), the idea of testing DW (latest version) for this project is also a highlight... testing Sass, HTML5 and APIs, Bootstrap 4.3 , live view rendreding and GIT... why not write a series of articles on the subject?

[pziecina]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

Preran ... due to the particular nature of this project (no budget, no internal team (local work, no synology) so no issue for latence et ressources leak), the idea of testing DW (latest version) for this project is also a highlight... testing Sass, HTML5 and APIs, Bootstrap 4.3 , live view rendreding and GIT... why not write a series of articles on the subject?

Whilst I don't use any CC version of Dw, I would be interested to read your general findings, (problems, views on, etc) just to compare notes on what I found building a custom project vs using frameworks.

As I have said earlier in the discussion, it is a multi-billion dollar part of web development that Dw has largely ignored, and also one that many do/did not know existed. Maybe this discussion and any articles you write, will help  others that think such projects are beyond 'what web developers do'.

I also would like to know if Preran has heard anything, (or can share anything) regarding the future of Dw.

[pziecina]

BenPleysier  wrote

If I were in a position to have to create a complete admin dashboard (which I am not), I would be looking to use a JS framework like VueJS, React or Angular 7 (or in my case App Connect in combination with Server Connect). A headless approach, delivered by these frameworks, will give speed and flexibility to the app.

The problem with frameworks, or none standard solutions, (by that I meen, not html, css, normal js, and server side) is that such projects are often long term. This means one must be able to do anything necessary without any requierments for more niche solutions, beyond the standard W3C or server/db side.

Even the development environment should be one that everyone involved can use, and feels comfortable using.

As Birnou will agree, it is standard practice, that once such a project is handed to the client, at the most 1 month later, someone, somewhere, will find something missing. Which is why I would be interested to read Birnous findings, on both his choices, (like using BS) and any other problems he finds.

[BenPleysier]

The reason that I mentioned frameworks, and that includes the likes of Bootstrap is two fold, namely

1. the wheel has been invented, just make use of it to speed up production
2. maintenance is made easy due to the many support forums and articles. Even those new to the project and a knowledge of the framework can understand the code.

JavaScript frameworks make it easy to completely separate front- and back-ends. While one group apply themselves to writing database queries and have them sitting there as JSON files (or API's), frontenders can concentrate on using the API's to populate the HTML documents.

[pziecina]

Hi Ben,

It's not the use of bootstrap that would concern me, (except the jQuery part) but the use of frameworks such as vue and angular. Such frameworks whilst having their followers, are not mainstream, and are still nich workflows especially when used for projects such as Birnou describes, (post #30).

The use of standard api's, html, js, css and a back-end would meen that full documentation is open to any developer.

I'm more concerned with raising awareness of building such projects, and making maintanence, (expansion and updating of features) a consideration that must not be forgotten. Which to my thinking means applying the principle of 'KISS', when researching, feature & content fact finding and development planning is in progress.

What many comming from web site development to PWA development often forget, is the sheer amount of data that can be involved, all of which must be created, compiled, correlated, stored and retrieved from the server. The back-end, and the data requirements for off-line use, (if relevant) are as big a problem as the front-end.

[osgood_]

pziecina  wrote

It's not the use of bootstrap that would concern me, (except the jQuery part) but the use of frameworks such as vue and angular. Such frameworks whilst having their followers, are not mainstream

I'd disagree on vue, react and angular not being mainsteam, just about any developer who is a developer is using one of them, maybe you could say ember or one of the other rarely mentioned js frameworks of which there are many is not really considered mainstream.

However if you are a whizz at vanilla javascript you dont need to resort to any js framework. My one concern is how many developers are diving straight into a framework be it html or js before actually having a good fundamental knowledge of basic coding requirements.

[pziecina]

osgood_  wrote

However if you are a whizz at vanilla javascript you dont need to resort to any js framework. My one concern is how many developers are diving straight into a framework be it html or js before actually having a good fundamental knowledge of basic coding requirements.

What worries me is that many of the js frameworks are re-inventing what can now be done using built-in browser api's on the js side, and what css alone can now do.

Using the the re-inventing the wheel saying, many of them are providing extra wheels that are no longer required.

[osgood_]

pziecina  wrote

osgood_   wrote

However if you are a whizz at vanilla javascript you dont need to resort to any js framework. My one concern is how many developers are diving straight into a framework be it html or js before actually having a good fundamental knowledge of basic coding requirements.

What worries me is that many of the js frameworks are re-inventing what can now be done using built-in browser api's on the js side, and what css alone can now do.

For sure its a bit of a mine field out there. Im trying to just focus on specific areas. Its difficult though when you've got so many different opinions being fired at you 24/7. 

[B i r n o u]

BenPleysier  a écrit

JavaScript frameworks make it easy to completely separate front- and back-ends. While one group apply themselves to writing database queries and have them sitting there as JSON files (or API's), frontenders can concentrate on using the API's to populate the HTML documents.

I have been doing this for several years now. Well at that time I think it was in 2006, just after reading an article by Jesse James Garrett on AJAX - https://www.scriptol.fr/ajax/ajax-garrett.php - ( I put this link in French because Adaptive Path has been bought, and the site no longer exists )

so Client was only handle by using JavaScript, and on server side, it was just a mill that managed the inputs/outputs

at first by using XML then quickly I came to Json...

I remember doing something at the time (2009) https://www.linkedin.com/learning/l-essentiel-d-ajax/definition-d-ajax to try to democratize this approach in small agencies (here in France) but it wasn't really followed... PHP was strongly handling all the UI concept... I remember having read article proning building PHP using AJAX... but without a dime of JavaScript... well... why not ?

so, by having created a set of personal tools, I was less inclined to use other libraries when they gradually appeared.

today I'm trying to figure out how to integrate personal libraries with a web component mechanism.

I'd be interested BenPleysier if you had any advice on the Angular, React or Vue side. Maybe osgood_ too don't you played a lot with Vue ?

any advice ?

[pziecina]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

so, by having created a set of personal tools, I was less inclined to use other libraries when they gradually appeared.

today I'm trying to figure out how to integrate personal libraries with a web component mechanism.

I'm glad its not only me wondering if it can or how it will work Birnou.

I think we started this type of work too early in the profession .

[B i r n o u]

pziecina  a écrit

https://forums.adobe.com/people/B+i+r+n+o+u   wrote

so, by having created a set of personal tools, I was less inclined to use other libraries when they gradually appeared.

today I'm trying to figure out how to integrate personal libraries with a web component mechanism.

I'm glad its not only me wondering if it can or how it will work Birnou.

I think we started this type of work too early in the profession .

it's funny, I just reread the summary of this tutorial published in early 2009... I remembered the writing I had just proposed to Gerhard Koren the boss at the time of video2brain... it was later at night or early in the morning....  and we were both like two kids with their new toy down the tree... pleased to offer it to whoever wanted it ... only good memories...

[BenPleysier]

Hi B i r n o u​,

I was using AJAX back in the days of Spry and ADDT. I know, a couple of more frameworks and even worse, ones that have since passed away mainly because of Adobe's disinterest when Booth and co departed the company.

As you rightly say, AJAX is now old hat with the advent of Json. I have been wrong in the past when I chose 8-track, Betamax and Foundation. This time I think that Json is here to stay and so it should. I also believe that a headless CMS approach is the right way to go, where data is client agnostic.

To achieve this we have a choice

• create your own code
• use a framework where the hard lifting as been done

There are pros and cons for each choice. Because I am a one man enterprise, I prefer to outsource the mundane parts of web development which leads me to using frameworks. Led by circumstance (Dreamweaver and Wappler), I have chosen to use the DMXzone frameworks and widgets along with Bootstrap. This means that I am not acquainted with VueJS, Angular or React.. osgood_  will know more about VueJS. App Connect is not dissimilar to VueJS.

To give you an idea of what my workflow looks like, the following shows the data structure for the online store in readiness for the administration dashboard:

This data is linked to the document as follows:

and used in the document as

The result is

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

I'd be interested BenPleysier  if you had any advice on the Angular, React or Vue side. Maybe osgood_  too don't you played a lot with Vue ?

any advice ?

Vue is really great in some respects BUT it doesnt really do anything that vanilla javascript cant do if you are knowldegable in javascript, especially as javascript is getting better and better.

Its somewhat like jquery in terms of usability, a lot more user friendly. However I would personally only use the cdn version and not the CLI version. I'm not sure  beyond 'import and export plus css scoping' if there is a real necessity for using CLI on a reasonably small website build such as I focus on, maybe larger websites. I really don't particullary like the idea of packaging everything up in a 'build' js file and having that file serve out the html.

Do I like it because its 'trendy' - probably plays a role in why I use it.  Do I need to use it, not really but its good to explore whats available. Im concentrating more these days on vanilla javascript where I can as its more pure and I guess thats where my satisfaction lies, not in making money and quick turnaround, but then I dont need to.

[pziecina]

Quite honestly Birnou, I had expected more regular contributors to join in the debate, as admin UI's and there use for PWAs is a multi-billion dollar section of web development, (in every country).

Given that bootstrap is ideally suited for small teams developing such, I would have also thought we would have had a differing of thought regarding boostrap and how easy or hard using it for admin Ui's extensibility would have been.

[B i r n o u]

by turning, turning, turning, taking back my notes... I think I'll move towards the outsider proposed in the first list of three #comment1

the list of components is almost infinite, it is we node, gulp and NPL (so).... BS 4... I think I'm going to move towards the (non modern) version with side bar) which seems more complete and cover the needs of the application

Well, the discussion is not over.

https://designreset.com/preview-equation/default/

[pziecina]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

by turning, turning, turning, taking back my notes... I think I'll move towards the outsider proposed in the first list of three #comment1

the list of components is almost infinite, it is we node, gulp and NPL (so).... BS 4... I think I'm going to move towards the (non modern) version with side bar) which seems more complete and cover the needs of the application

Well, the discussion is not over.

https://designreset.com/preview-equation/default/

I don't know if you have viewed that template on a tablet, (I'm using an iPad) but if you collapse the sidebar then scroll the page, the sidebar expands on its own.