Javascript Words

Checkout [Javascripting.com][javascripting]

• Animate.css
  • What: cross-browser CSS3 animations. Plug and play.
• Polymer
  • What: is an open-source lib for building web applications using Web Components.
  • Who: Google and contributors
  • Licence: 3-Clause BSD
  • Usage: Youtube, many Google Services, Netflix, EA, ING, Coca Cola etc.
• Styled Components
  • What: Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress.
• GraphQL:
  • What: a specification to query web services.
• CGS (Create GraphQL Server)
• ES Lint
  • What: While coding compiler and debugger
• PWA (Progressive Web Apps)
  • What: normal web apps with added functionality for working offline, push notifications and device hardware access.
  • Where: progressivewebapproom.com, and with Polymer
• Service Workers:
  • What: Scriptable network proxy in the web browser to manage the web/HTTP requests programmatically. They lie between network and device to supply the content. Capable of caching and allow error-free behavior offline.
  • Why: give web apps the best of rich experience and high performance, low storage space, real-time updates, good search engine visibility
• Web Workers
  • What: Closely related to service workers but more widely supported.
  • Why: allows web apps to run multiple threads of JS code simultaneously.
• Web Assembly
  • Why: allows precompiled code to run in a web browser at near-native speed.
• Indexed Database API
  • What: W3C standard API for interacting with NoSQL dbs. API supported by modern browsers and enables storage of JSON objects and any structure representable as a string.
• Web Storage
  • What: W3C standard API that enables key-value storage in modern browsers.
  • How: API of two objects: sessionStorage and localStorage
• App Shell Model:
  • What: architectural approach for PWA
  • Why: for rapid loading, service workers store the Basic UI called "shell' which is a basic initial frame or layout.
• Apollo
  • What: open source implementation of GraphQL
• Universal Javascript: formerly Isomorphic javascript, javascript that runs everywhere (client/server)
• CSR (Client Side Rendering):
  • What: a paradigm where html is generated by the javascript within the client.
  • Which: CRA
• SSR (Server Side Rendering):
  • What: a paradigm where html is rendered in the server and ready to display in the client.
  • Which: Next.js
• Pre-Rendering
  • Which: can be done with CRA in order to speed the loading time. When done with CRA, it becomes a better solution than Nextjs.
• Bundle Splitting:
  • What: split javascript content sent to the client in order to accelerate time to interaction.
• Node Module:
  • What: something that can run on Node.js and installed through NPM
• NPM (Node.js Package Manager)
  • What: command line tool with access to an online library of javascript packages.
  • Why: Allows developers to share reuse packages
• Angular
  • What: a development platform for building mobile and desktop web applications using Typescript/JavaScript and other languages.
• Material Design (codename Quantum Paper)
  • What: a cross-platform design language using grid-based layouts, responsive animations and transitions, padding, and depth effects (shadows and lighting). It can be themed. Material Components are the visual building blocks used to create the interface. Libraries exist for React see Material Ui. Theme editors allow you to intuitively change the look.
  • Who: Google
  • Why: Has accessibility implemented. Gives a unified Google look and feel, speeds development.
  • Where: mainly on Android, but design has been replicated for the web and anywhere.
• Material Ui
  • What: React components that implement Google's Material Design
  • Why: Use premade themes, and paid ones.
• Material2
  • What: Material Design components for Angular
• Materialize
  • What: Materialize a CSS framework based on Material Design
• Pixi.js
  • What: Super fast HTML5 2D rendering engine that uses wegGL with canvas fallback
• Native Script
  • What: framework for building truly native mobile apps with javascript. Use web skills like Angular and Vue.js, FlexBox and Css, and get native UI and performance on iOS and Android.
• Underscore.js
  • What:
• Cube.js:
  • What: modular framework to build analytical web applications. Primarily used to build internal business intelligence tools or to add customer-facing analytics to an existing application.
  • How: designed to work with Serverless Query Engines like AWS Athena and Google BigQuery,
  • Why: Multi-stage querying approach makes it suitable for handling trillions of data points.
• Lodash
  • What: An alternative to Underscore.js, delivering consistency, customization, performance and extra features.
• Mocha
  • What: a simple flexible fun javascript test framework for node.js & browser (BDD, TDD, QUnit styles via interfaces)
• Redux
  • What: predictable state container for js apps.
  • Why: Helps write applications that behave consistently, run in different environments (client, server and native) and easy to test. Can be used with React or any other library.
• React:
  • What: A javascript library for building user interfaces.
  • Why: unix philosophy, choose the tools that fit your needs.
• React Native
  • What: A framework for building native mobile apps with React.
• Preact
  • What: provides the thinnest possible Virtual DOM abstraction on top ot the DOM.
  • Why: Performance, Size, Efficiency, Understandability, Compatibility with React. The web is a stable platform, it's time we stopped reimplementing it in the name of safety. Diffs Virtual DOM against DOM itself, registers real event handlers, and plays nicely with other libraries. Can use thousands of Components available in the React ecosystem.
  • Who: Jason Miller
• Ant Design
  • What: a UI Design language and React implementation
• React Bootstrap
  • What: Boostrap 3 components built with React
• Vue.js
  • What: fast and composable MVVM for building interactive interfaces. Provides data-reactive components with a simple and flexible API. Declarative rendering with plain js object based reactivity system. Component-oriented dev style with tooling support. Lean and extensible core.
• Nuxt.js
  • What: the Vue.js developer framework.
• MVVM (Model View Viewmodel)
  • What: a design pattern
  • How: Input in begins with the View, not the ViewModel. Code classes (ViewModel) are the application while the view is the interface allowing users to interact with the app. One to many mapping between the View and the ViewModel, no reference between them.
  • Why: Need share proj with designer? Require thorough unit testing? Reusable Components across projects? Need more flexibility to change your user interface without having to refactor other logic in the code base?
• MVP (Model View Presenter)
  • What: a design pattern
  • How: Data input begins with the view, not the Presenter. The view is actually your application while presenter handles the app flow. One-to-one mapping between the View and the Presenter in MVP no reference between them.
• Ionic
  • What: advance HTML5 Mobile App Framework. A front-end framework for developing hybrid mobile apps in html5. Best friends with AngularJS.
• Electron
  • What: framework that lets you build cross platform desktop applications using Javascript HTML and CSS. Based on Node.js and Chromium.
• Babel
  • What: a compiler for writing next generation javascript
  • Who: group of volunteers.
• 6to5
  • What: turn ES6 into readable vanilla ES5 code with source maps.
• Type Script
  • What: A superset of javascript that compiles to clean javascript output.
  • Why: adds optional types to Javascript that support tools for large scale Javascript applications for any browser, host or OS.
• CRA (Create React App)
  • What: a node module that sets up an environment to start building a React application easily.
  • Good: static files can be served through a CDN
  • Bad: Bundle splitting is not automatic. But can be implemented.
  • Good: Using Pre-Rendering speeds things a lot.
• Node.js:
  • What: a javascript server,
  • Who: Ryan Dahl
• Socket.io
  • What: realtime application framework for node.js with HTML5 WebSockets and cross browser fallbacks. It consists of a Node.js server, and a javascript client library for the browser (a node.js client).
• Async
  • What: Async utilities for node and the browser
• Highlight.js
  • What: Javascript syntax highlighting
• Next.js:
  • What: frontend framework that happens to have a server-side component to allow features like HTMR and Server Side Rendering. You can combine it with your [server] app.
  • Why: a universal app is an option when you have a client-side Single Page Application, but don't have server rendered templates yet.
  • Good: Bundle splitting is automatic.
  • Bad: Static files are generated by the Node.js server and cannot be served through a CDN.
• Three.js
  • What: javascript 3D library
• Chart.js
  • What: simple HTML5 charts using the canvas tag
• Incubator Echarts
  • What: a powerful interactive charting and visualization library.
• Pdf.js
  • What: PDF reader in javascript
• Video.js
  • What: Universal video embed
• Axios
  • What: Promise based HTTP client for the browser and Node.js
• Moment
  • What: Parse, validate, manipulate, and display dates in javascript
• Yarn
  • What: fast, reliable, and secure dependency management. See Npm
• Leaflet
  • What: Javascript library for mobile-friendly interactive maps.
• Sequelize
  • What: an easy-to-use multi SQL dialect ORM for Node.js
• Storybook
  • What: Component UI explorer
  • Why: allows CDD
• CDD (Component Driven Development)
  • What: a dev philosophy which embraces focusing on building the atomic components in isolation first.
• VTDD (Visual Test Driven Development)
• Web Component:
  • What: A reusable piece of UI
  • Why: build once reuse anywhere. React is the past
  • How: Web Components are built with Custom Elements, Shadow DOM and HTML Templates. A React Component is a non standard Component.
• Custom Elements:
  • What: Browser Native API for building custom html tags and components.
• Shadow DOM:
  • What: a feature of Custom Elements that allows greater encapsulation by rendering them without putting them into the main document DOM tree.
• HTML Templates
  • What: an Html fragment that isn't rendered until instantiated via JavaScript.
• Hybridsjs
• lit-element
  • What: allows implementing React-alike one-way-data-flow-with-central-store for Web Components.
• GluonElement
• Express.js
  • What: de fact standard web server framework for Node.js. Sinatra inspired web development framework
• Ember.js
  • What: framework that does all of the heavy lifting that you'd normally have to do by hand.
  • Why: Convention over configuration. Everything is figured out for you, contrary to React where you have to choose. Every 6 weeks there is a new releases (and they also do LTS). Really open source, they decide as a team, contrary to Angular with Google and Facebook with React.
  • Users: Popular in the US: Twitch, Yahoo, Linkedin, Apple Music
• Parcel
  • What: blazing fast, zero configuration web application bundler.
• reveal.js
  • What: a framework for easily creating beautiful presentations using HTML
• Angular.js
  • What: Write client-side web applications as if you had a smarter browser. It automatically synchronizes data from your UI (view) with your javascript objects (model) through 2-way data binding. Angular teaches the browser how to do dependency injection and inversion of control. Helps with server-side communication taming async callbacks with promises and deferred objects. It makes client side navigation and deep linking with hashbang urls or HTML5 pushState a piece of cake.
  • Cons: retro compatibility is really bad.
  • Good: templating framework is really friendly.
  • Good: Ahead of time compilation (AOTC), super fast bootstrapping
  • Philosophy: default configs, but can be customized as opposed to React, where no default is chosen for you, and Ember which has only the default option.
• Express.js What: fast, unopinionated, minimalist web framework for Node.js
• Meteor
  • What: simple, database-everywhere, data-on-the-wire, pure Javascript web framework based on Node.js. Can be used with React, Blaze, Angular etc. Out of the box it works with mongDB
  • Why: build web apps that send data-on-the-wire rather than in HTML.
  • Cons: If you don't need to push data to the client in real time (like in games), then it may be a burden to use meteor.
  • Pros: Can be integrated to mobile with Cordova
• Sentry
  • What: realtime error logging and aggregation platform
  • Why: users and logs provide clues, Sentry provides answers
• Webpack
  • What: Packs CommonJS/AMD modules for the browser. Allows to split your codebase into multiple bundles. Support loaders to preprocessor files: json, jade, coffee, css, less etc.
• Zeit.co
  • What: Global Serverless Platform, host Nextjs

[cra-vs-nextjs][https://codeburst.io/next-js-ssr-vs-create-react-app-csr-7452f71599f6] [javascripting][https://www.javascripting.com/]