Select development technologies for web ui

[sabicalija]

Select development technologies for web ui

Requirements

• Easiliy create dynamic web page
• Easiliy integrate static content with different styles
• Easily interface REST APIs
• Easily create accessible web page
• Possibillity to integrate other webpage/web application
• Have reusable components

Will try https://vuejs.org/ and maybe https://vuepress.vuejs.org/

[sabicalija]

Hab jetzt ein paar Wireframe Apps gesucht und diese für gut befunden :smirk:

• [x] https://wireframe.cc/ Dieses scheint mir am einfachsten. Hab jetzt mal unsere Notizen von heute dort übertragen: https://wireframe.cc/RJFOgW

• [ ] https://mockflow.com/

• [ ] https://www.fluidui.com/ Damit kann man interaktive Demos erstellen: https://www.fluidui.com/atmosphere-high-fidelity-ipad-prototype

• [ ] https://pencil.evolus.vn/ Pencil ist ein open-source GUI prototyping tool, unterstützt auf allen Plattformen

Alle kosten was (bis auf Pencil), bieten aber free Varianten an. Bei Mockflow kann man bspw. bei allen verfügbaren Apps ein Projekt erstellen. Ich konnte leider keine (passablen) Online Tools finden die gänzlich gratis sind.

Was nehmen wir?

Wireframe find ich ganz gut. Ist auch recht einfach. Nachteil ist ev. nur, dass jeder der den Link hat, scheinbar auch den Inhalt verändern kann. :weary:

[sabicalija]

Hab auch mit einem vue.js Kurs begonnen. Ist sogar von einem aus Österreich. :relaxed:

https://www.packtpub.com/web-development/hands-web-development-vuejs-video

Hab das vorhin erstellt:

https://jsfiddle.net/vmkqy5nt/1/

In der Console sieht du auch log messages. Mit dem vue devtools (Chrome, Firefox, ...) sieht man noch mehr. Kann bspw. components und events beobachten, etc.

log	components	events

[sabicalija]

The documentation and tools I've studied and numerous that I've decided to write notes and to put them in a "logbook", I started in the wiki section (see here).

The notes on the specified requirements, by @deinhofer (see here), are commented below, which is also included in the logbook entry.

• Easiliy (sic! - ^^) create dynamic web page To be able to select development tools, we have to understand what a “dynamic web page” is, actually. Vue, which is the current development environment or framework respectively, supports the creation of so-called reactive applications (sf. here), where the displayed web page changes when data changes. “Dynamic” animations are supported anyway by html, and with node, npm and webpack, other libraries - supporting “dynamic” components - are integrated easily, almost without no effort. vue-cli (and webpack) ensure browser compatibility, efficiency (e.g. file size) and deployment, while keeping track of all dependencies.

• Easiliy integrate static content with different styles It would be great if we could give some examples on the static content we want to provide. Styling and dynamic presentation of static content can theoretically be easily achieved by using cascading stylesheets. Vue add animations and change style (or used classes) dynamically. Styling parameters can be centralized and encapsulated using sass, scss or any of the other supported style dialects and possibly by using vuex to store relevant parameters centrally (in one configuration file). The only brief read through the documentation of vue-press, reading How it Works and Why Not …​?, it turns out that VuePress is basically Vue, Vue Router and webpack which are basically already included in the current project. To understand VuePress and to compare it with Vue alone, further readings of the documentation are necessary. Additionally, it would help a lot, to specify this requirement more concretely, maybe by proving some examples of the desired output and describing the desired workflow. For instance, it is unclear what seems to be feasible in terms of complexity (“easily”).

• Easily interface REST APIs REST (and Web Sockets) are “easily” integrated with the Vue application (see here for instance). Further clarification necessary.

• Easily create accessible web page Basic accessibility support is provided by Bootstrap which is included in the current Vue application (e.g. keyboard navigation). ARIA tags can be used as usually. npm provides several modules for accessible web pages, which can be included in the current setup.

• Possibillity to integrate other webpage/web application If the source code is provided, as it is with WebACS, it can be managed as an assets by webpack and included in the application without any trouble. The current setup would also support a more modern and maintainable approach for a future (re-)development of WebACS itself.

• Have reusable components Vue allows to separate the web page in several components and routing between different content using the default VueRouter and other if desired.

[sabicalija]

Notes:

• auto completion (search bar, etc.)
• test with screen readers
• check for accessibility evaluation techn.