Code Monkey home page Code Monkey logo

ui_architecture_tools_processes's Introduction

UI Architecture Tools and Processes

Design Process

Google Design Sprints

GV Design Sprints

Material Design

Google Design

Material Up - Daily updates of new mobile and web apps that use material design principles in production. Has a newsletter and twitter feed associated it with it.

Material UI - UI kit and components for React

Angular Material - UI kit and components for Angular 1

jQuery Material Design Plugins

Front-End View Rendering / DOM Manipulation

Use

React

PreactJS - Lighter weight library that uses React API. Works well as a production build target for React--i.e., develop in React with React dev tools and then have a build task in prod that uses Preact (it's as easy as running a different webpack loader in a prod environment)

Know

Angular 1

jQuery

Explore

Vue

Angular 2

React State Management

Use

Nothing - If data and app state flows up and down component trees without crossing over tree branches "horizontally" much, then you don't really need a special state management library. Introduce a library when events in one part of the page/app start affecting distant parts of the page/app.

Redux

Know

Flux

Misc JS Libraries

Know

Lodash - utility library

Explore

Immutable JS - immutable data structures

RxJs - reactive programming library

Ramda - functional programming library

Unit Testing

Use

Mocha - test framework for Node.js and browser code

Chai - BDD /TDD style assertion library used with Mocha

Sinon - test mocks, stubs, spies used with Mocha

Jest - React component tester. Shallow renders the component in isolation and allows you to test the render against an earlier canonical snapshot that was taken. Good for UI regression testing.

Supertest - server-side api testing

End-to-End Testing

Use

Webdriver.io - Selenium headless browser and web automation for Node

Module Bundling and Build Tools

Use

Webpack

npm scripts

Know

Grunt

Gulp

CSS Pre-processors

Use

Sass

Ajax

Use

Fetch API - promise-based native web api for http requests. Polyfill until it has universal browser support.

Explore

Axios

Server API

Use

Restify

Know

Express

Explore

Hapi

Koa

Node

Use

6.x

Explore

7.x

ui_architecture_tools_processes's People

Watchers

Ignacio Prado avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.