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

Crosswalk

Server-side event-driven Javascript Frameworks

Deno

The Tool

Resources

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

Tessel

Tessel 1
Tessel 2

Espruino

Intel Galileo with "Intel XDK IoT Edition"

Hardware
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”.
Resources

Node.js

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,...
Resources

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
  • Bower - “A package manager for the web”.
Cylon.js ( for Robotics & IOT )
Control software for Drones
Express
Grunt
  • 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”.
hapi
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”.
MQTT.JS
Node-Inspector
Node-RED
Sequelize
Webkit
  • 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”.
yargs

Tips & Tricks

Literature

Resources

Wakanda

Some HTML5 / Javascript Client Frameworks

Adobe Flex

AngularJS

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

Resources

AppJS

  • 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

Backbone.js

Baker Ebook Framework

Chadin.js

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

Createjs

  • 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

DroidScript

Eclipse Scout

Electron

Enyo

    • “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

hopscotch

Intel INDE

Ionic

  • 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 :-).

jQuery

Leaflet & GeoJSON

Meteor.js

Mithril

Mousetrap

NativeScript

  • 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

Prototype.js

RAD.js

React

The Framework

Relay - Add-on Framework for data-driven Applications

Additional Frameworks

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

Online Tool

Resources

React
Relay

React Native

REST-based Javascript Frameworks

Resumable.js

  • 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

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

Syncfusion

    • 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”.

TideSDK

Underscore.js

  • 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

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

Nuxt

Windows Library for JavaScript ( WinJS )

Yeoman

Some Intermediate Language Frameworks for HTML5 / Javascript Clients

Dart

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

Frameworks

Resources

  • 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

Chrome

Firefox

Opera

Yandex

Resources

Appropriate OpenDirectory Directory Pages

 
en/webtech05.html.txt · Last modified: 2024/03/28 11:45 (external edit) · []
Recent changes RSS feed Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki