Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Wednesday, January 29, 2020

RxJS library

Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change. RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code. RxJS is a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc) to allow handling asynchronous events as collections.
RxJS provides an implementation of the Observable type, which is needed until the type becomes part of the language and until browsers support it. The library also provides utility functions for creating and working with observables. These utility functions can be used for:
  • Converting existing code for async operations into observables
  • Iterating through the values in a stream
  • Mapping values to different types
  • Filtering streams
  • Composing multiple streams
The essential concepts in RxJS which solve async event management are:
  • Observable: represents the idea of an invokable collection of future values or events.
  • Observer: is a collection of callbacks that knows how to listen to values delivered by the Observable.
  • Subscription: represents the execution of an Observable, is primarily useful for cancelling the execution.
  • Operators: are pure functions that enable a functional programming style of dealing with collections with operations like map, filter, concat, reduce, etc.
  • Subject: is the equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers.
  • Schedulers: are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others.

Wednesday, April 25, 2018

Jest : Javascript Unit Testing Framework

Jest is delightful JavaScript Testing framework. It has below features:

  • Easy Setup: Complete and easy to set-up JavaScript testing solution. Works out of the box for any React project.
  • Instant Feedback: Fast interactive watch mode runs only test files related to changed files and is optimized to give signal quickly.
  • Snapshot Testing: Capture snapshots of React trees or other serializable values to simplify testing and to analyze how state changes over time.
  • Zero configuration testing platform: Jest is used by Facebook to test all JavaScript code including React applications. Jest is already configured when you use create-react-app or react-native init to create your React and React Native projects. Place your tests in a __tests__ folder, or name your test files with a .spec.js or .test.js extension. Whatever you prefer, Jest will find and run your tests.
  • Fast and sandboxed: Jest parallelizes test runs across workers to maximize performance. Console messages are buffered and printed together with test results. Sandboxed test files and automatic global state resets for every test so no two tests conflict with each other.
  • Built-in code coverage reports: Easily create code coverage reports using --coverage. No additional setup or libraries needed! Jest can collect code coverage information from entire projects, including untested files.
  • Powerful mocking library: Jest has powerful mocking library for functions and modules. Mock React Native components using jest-react-native.
  • Works with TypeScript: Jest works with any compile-to-JavaScript language and integrates seamlessly with Babel and with TypeScript through ts-jest.

Wednesday, January 31, 2018

Javascript Module Definition

Over the years there’s been a steadily increasing ecosystem of JavaScript components to choose from. The sheer amount of choices is fantastic, but this also infamously presents a difficulty when components are mixed-and-matched. And it doesn’t take too long for budding developers to find out that not all components are built to play nicely together.

To address these issues, the competing module specs AMD and CommonJS have appeared on the scene, allowing developers to write their code in an agreed-upon sandboxed and modularized way, so as not to “pollute the ecosystem”.

Asynchronous module definition (AMD)
Asynchronous module definition (AMD) is a specification for the programming language JavaScript. It defines an application programming interface (API) that defines code modules and their dependencies, and loads them asynchronously if desired. Implementations of AMD provide the following benefits:
  • Website performance improvements. AMD implementations load smaller JavaScript files, and then only when they are needed.
  • Fewer page errors. AMD implementations allow developers to define dependencies that must load before a module is executed, so the module does not try to use outside code that is not available yet.
In addition to loading multiple JavaScript files at runtime, AMD implementations allow developers to encapsulate code in smaller, more logically-organized files, in a way similar to other programming languages such as Java. For production and deployment, developers can concatenate and minify JavaScript modules based on an AMD API into one file, the same as traditional JavaScript.

CommonJS
CommonJS is a style you may be familiar with if you’re written anything in Node (which uses a slight variant). It’s also been gaining traction on the frontend with Browserify.

Universal Module Definition (UMD)
Since CommonJS and AMD styles have both been equally popular, it seems there’s yet no consensus. This has brought about the push for a “universal” pattern that supports both styles, which brings us to none other than the Universal Module Definition.
The pattern is admittedly ugly, but is both AMD and CommonJS compatible, as well as supporting the old-style “global” variable definition.

Thursday, January 25, 2018

webpack : module bundler

Webpack is the latest and greatest in front-end development tools. It is a module bundler that works great with the most modern of front-end workflows including Babel, ReactJS, CommonJS, among others.
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.

Link: https://webpack.js.org/
 

Saturday, March 18, 2017

ExtJS : JavaScript application framework

Ext JS is a pure JavaScript application framework for building interactive cross platform web applications using techniques such as Ajax, DHTML and DOM scripting. Ext JS helps you build data-intensive, cross-platform web apps for desktops, tablets, and smartphones. Originally built as an add-on library extension of Yahoo! User Interface Library (YUI). Ext JS includes interoperability with jQuery and Prototype. Beginning with version 1.1, Ext JS retains no dependencies on external libraries, instead making their use optional.
Sencha Ext JS provides everything a developer needs to build data-intensive, cross-platform web applications. Ext JS leverages HTML5 features on modern browsers while maintaining compatibility and functionality for legacy browsers.
Ext JS features hundreds of high-performance, pre-tested and integrated UI components including calendar, grids, charts and more. The Ext JS Grid and Advanced Charting package can handle millions of records with ease. The framework includes a robust data package that can consume data from any back-end data source. With Sencha Pivot Grid and D3 adapter, organizations can add leading-edge visualization and analytics capabilities to their web applications.
The rich set of Ext JS tools and themes help improve development productivity and accelerate the delivery of great looking web applications. Tools are available to help with application design, development, theming, and debugging as well as build optimization and deployment.
Ext JS includes a set of GUI-based form controls (or "widgets") for use within web applications:
  • text field and textarea input controls
  • date fields with a pop-up date-picker
  • numeric fields
  • list box and combo boxes
  • radio and checkbox controls
  • html editor control
  • grid contro
  • tree control
  • tab panels
  • toolbars
  • desktop application-style menus
  • region panels to allow a form to be divided into multiple sub-sections
  • sliders
  • vector graphics charts
Ext.NET is an ASP.NET component framework integrating the Ext library, current version (as of September 2015) is 3.2.1 which integrates ExtJS version 5.1.1
Ext JS version 6.0 of the Ext JS framework was released on March 29, 2016. It merges the Sencha Touch (mobile) framework into Ext JS.