Trace: » webtech05.html

[hemmerling] Web Technologies ( HTML5, HTML, XML & Javascript ) 5/5 - Javascript Frameworks

Market Research about Client Javascript Frameworks, of 2018-04 & 2018-07

  • Experts told me in 2018-04, that the dominant client frameworks are:
    1. REACT.
    2. Angular.
  • Experts told me in 2022-01, that REACT is a minimal framework ( there is much you can and must do by your own, as developer ), while Vue and Angular are complete frameworks.
  • Experts told me in 2018-08, that a specildominant client framework stack is:
    • REACT & Relay & GraphQL as front end.
    • Sequelize ( a promise-based ORM for Node.js ) & MySQL as backend.
  • Experts told me in 2018-04, that the dominant UI design style is “Material Design”, and so client frameworks which help to implement it.
  • As of 2018, many server-side framworks ( e.g. written in Java, Python, Ruby, Node.JS ) communicate by an interface ( e.g. a REST API ) with client Javascript frameworks.

Server-side Javascript Frameworks


Server-side event-driven Javascript Frameworks


The Tool


Microcontrollers with Node.js alike Firmware and Node.js Firmware


Tessel 1
Tessel 2


Intel Galileo with "Intel XDK IoT Edition"

Intel XDK for IOT
  • Intel Developer Zone "IoT" - "Intel XDK IoT Edition" - “Node.js* is great for creating web interfaces. It works well with cloud connectivity to get your IoT devices communicating with one another quickly”. Download offer.
  • mraa 1.1.2. Low Level Skeleton Library for Communication on GNU/Linux platforms - “Libmraa is a C/C++ library with bindings to Python, Javascript and Java to interface with the I/O on Galileo, Edison & other platforms, with a structured and sane API where port names/numbering matches the board that you are on. Use of libmraa does not tie you to specific hardware with board detection done at runtime you can create portable code that will work across the supported platforms. The intent is to make it easier for developers and sensor manufacturers to map their sensors & actuators on top of supported hardware and to allow control of low level communication protocol by high level languages & constructs”.


The Tool

The V8 Engine

Major Editions

0.10.40 Legacy for W2K
  • Node.js v0.10.40 for Windows is the latest stable edition which runs on my Athlon XP2400 computer ( = Pentium III CPU ). The latest edition Node.js v0.11.14 for Windows with Pentium-III CPUs is unstable. Later editions requrire a Pentium-IV CPU.
v0.12.10 Legacy for Tessel
v4.x LTS
v5, v6, v7,...

Online Services with Node.JS Servers for Javascript Development

    • “Cloud 9 IDE is a different... It runs straight out of the browser. Cloud 9 IDE is a hosted service and it’s free for open source projects”.
    • There are also free material for Javascript and Node.JS online training :-).
    • “npm install -g javascripting”.

Javascript Frameworks & Tools built on Node.js

  • Bower - “A package manager for the web”.
Cylon.js ( for Robotics & IOT )
Control software for Drones
  • Grunt: The JavaScript Task Runner - “Why use a task runner? In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort”.
HTML Templates for Node.js
Johnny-Five ( for Robotics & IOT )
  • Software:
    • Johnny-Five - “The JavaScript Robotics & IoT Platform”.
  • Hardware:
    • See ”“The Johnny-Five Inventor's Kit”.
  • NW.js, GitHub "nwjs" ( formerly: “node-webkit” ) - “Call all Node.js modules directly from DOM and enable a new way of writing applications with all Web technologies”.

Tips & Tricks




Some HTML5 / Javascript Client Frameworks

Adobe Flex


Appcelerator - "Native" Framework & IDE for Smartphones

The Company

IDEs based on Eclipse and Command Line Tools, for Linux, Windows, MacOSX

The OpenSource Titanium Desktop

Appcelerator & Android SDK

  • This way you can configure Android SDK with Appcelerator:
    1. Open the Preferences dialog: On Windows and Linux, from the studio menu bar, select Window > Preferences.
    2. In the Preferences dialog, navigate to Studio > Platforms > Android SDK.
    3. Set your Android SDK path. Enter the path to your Android SDK in the Android SDK Home textbox or click the Configure button to navigate to the SDK directory.
    4. Select your default Android SDK. Select a Google APIs item from the Default Android SDK drop-down menu.
    5. Click “apply” and “ok”.
  • Now, If in your SDK folder does not contain the necessary build tools which are required for the installed Appcelerator SDKs to develop Android apps, Then dialog will show an error “No Android SDK found in the specified folder”. This means you need to upgrade and install newer Android SDK tools. Android SDK packages can be installed using the Android SDK Manager tool. which is in “Android SDK folder/tools/android”. It will open Android SDK Manager tool which will show you the SDK tools are installed. And Also the newer SDK tools that you can install. Instal the SDK tools. Now restart the studio and go to the Preferences dialog and check if the error still exist? you will see the Android SDK is configured with the studio.

Tips & Tricks



  • The OpenSource AppJS - “Build Desktop Applications for Linux, Windows and Mac using HTML, CSS and Javascript”.
    • Twitter "appjs" - “SDK to develop cross-platform desktop apps with HTML5/Nodejs”.

Project Avatar


Baker Ebook Framework


  • Chadin.js - “Simple overlay instructions for your apps”.


  • Createjs - “A comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content”.

D3.js - Data-Driven Documents


Eclipse Scout



    • “A framework for building native-quality HTML5 apps that run everywhere”.
    • “Enyo has powered apps for Palm phones, the HP TouchPad and now the 2014 LG Smart TV”.

greuler - graph theory visualizations


Intel INDE


  • Ionic Framework - “Cross-Platform Mobile App Development”, “One codebase. Any platform. Now in Vue / Angular / React. An open source mobile toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web”.
  • I learned about the use of Ionic by mobile application AM Suite for both Android, iPhone / iPad & desktop browser on the E-World 2022 fair, in 2022-06 :-). On smartphones and tablets, it looks like a native app :-).


Leaflet & GeoJSON





  • NativeScript - “Create Native iOS and Android Apps with JavaScript. Open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript”.

Cordova / Phonegap




The Framework

Relay - Add-on Framework for data-driven Applications

Additional Frameworks

  • React Router - “Declarative routing for React apps at any scale”.
Data Fetching
Testing without Browser
Testing with Browser
External State Management
Styling ( CSS )

Online Tool



React Native

REST-based Javascript Frameworks


  • Resumable.js, Github "23/resumable.js" - “A JavaScript library for providing multiple simultaneous, stable, fault-tolerant and resumable/restartable uploads via the HTML5 File API.

Sencha Inc.


  • Socket.IO - “The cross-browser WebSocket for realtime apps”.


    • The commercial but affordable Syncfusion "Essential Studio for Javascript" for hobbyists - Price: 1 $. “The first JavaScript control framework designed for line-of-business (LOB) applications. 40+ unique controls including charts, grids, maps, gauges and much more”.



  • Underscore.js - “A utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js, but without extending any of the built-in JavaScript objects”.

Vue.js & Nuxt


  • Vue.js - “The Progressive JavaScript Framework”, “An incrementally adoptable ecosystem that scales between a library and a full-featured framework”.


Windows Library for JavaScript ( WinJS )


Some Intermediate Language Frameworks for HTML5 / Javascript Clients


Google Web Toolkit

  • Popular users:
  • Principles:
    • You write Java code, the GWT creates Javascript for Browsers.
    • You write a Single-Page Applications. There is a file “nocache.js” loaded by the first and only HTML page. Then all other contents is loaded dynamically by this Javascript code.
    • You might distribute the Javascript code generated by GWT by a Phonegap application.
    • You might communicate in Javascript by REST protocol with server.

Material Design ( Frameworks )

The Concept



  • Tutorialzine "The 15 Best Material Design Frameworks and Libraries" - “Material design was developed by Google, with the basic idea to create a unified style for all of the company's web and mobile apps. It is based on many principles including things like proper animations, responsiveness, and smart usage of colors and shadows.... Although Google's design language is seen mainly in native Android apps, it's still a great choice for web and hybrid applications. To aid users in the creation of web projects rocking the Material look, there are many frameworks and libraries offering ready-to-use components and styles.

Browser Extensions & Browser Addons






Appropriate OpenDirectory Directory Pages

en/webtech05.html.txt · Last modified: 2023/11/30 21:57 (external edit) · []
Recent changes RSS feed Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki