Web Frameworks: User Interface Development

Element, component, widget

Defining elements

Out of the box

  • First, it allows development to be accelerated, being able to create feature-rich applications by just connecting together elements that usually share a common UX design.
  • Second, it gives more in depth patterns of how to build or extend additional components. Because many of features provided by frameworks transcend the capabilities of the browser, frameworks often solve these issues in radically different ways, many of which we will explore in greater detail in this series.

Customizing Elements

Angular 2+

Defining elements

Out of the box

Customizing elements

Building a user interface library

Re-using and sharing elements

React + Redux

Defining elements

Out of the box

Customizing elements

Building a user interface library

Re-using and sharing elements

Vue.js

Defining elements

Out of the box

  • Element — Vue 2.0 based component library for developers, designers and product managers, with a set of design resources.
  • Framework7 — Full Featured HTML Framework For Building iOS and Android Apps. It relies upon PhoneGap to provide a native-like experience.
  • Keen UI — A lightweight collection of essential UI components written with Vue.js and inspired by Material Design.
  • Quasar — Build responsive websites, hybrid mobile Apps (that look native!) and Electron apps using same code, with Vue.js 2.
  • Vuetify.js — A library of Material Design Vue.js components.

Customizing elements

Building a user interface library

Re-using and sharing elements

Dojo 2

Defining elements

Out of the box

Customizing elements

Building a user interface library

Re-using and sharing elements

Ember

Defining elements

Out of the box

Customizing elements

Building a user interface library

Re-using and sharing elements

Aurelia

Defining elements

Out of the box

  • Buttons
  • Checkboxes
  • Layout
  • Inputs
  • Text Area
  • Chips
  • Icons

Customizing elements

Building a user interface library

Re-using and sharing elements

Summary

Angular 2+

React + Redux

Vue.js

Dojo 2

Ember.js

Aurelia

Up next

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
SitePen

SitePen

Modernizing Apps, Tools & Teams | sitepen.com | Twitter: @sitepen