Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Wednesday, December 15, 2021

How To Effectively Detect And Mitigate Trojan Source Attacks In Javascript?

How To Effectively Detect And Mitigate Trojan Source Attacks In Javascript

Javascript allows website developers to run any code they want when a user visits their website. Naturally, website developers can be either good or bad. Also, cybercriminals continuously manipulate the code on a number of websites to perform malicious functions. But javascript is not an insecure programming language. Code issues or improper implementations can create backdoors that attackers can exploit. And here issues take birth. When you browse a website, a series of Javascript(.js) files are downloaded on your PC automatically. Attackers redirect users to compromised websites. These can be either created by them or they can be legitimate websites they’ve hacked into. It has been analysed that 82% of malicious sites are hacked legitimate sites.

Also, traditional code editors and code review practices miss detecting bidirectional characters present in the source code. This allows actors to inject malicious code that looks benign. And this issue was made public on 1st November, 2021. If you are also facing the same trojan attack issues, then this blog is for you. Here you’ll get the complete guide on how to detect and mitigate Trojan source attacks in javascript.

What Is A Trojan Source Attack?

Trojan source is a new type of source code and supply chain attack that causes the source code viewed by humans to be different from the actual software generated by the compiler- means the behaviour of software won’t match what the source code appears to say. 

Trojan source is a development style of attack that makes the source code read on the screen by human significantly different from the binary code generated by a compiler through use of Unicode control characters.

Let’s see the snippet from VS code of a Trojan Source attack as is employed in javascript source code:

// running internal logic for privileged users:
var accessLevel = "user";
if (accessLevel != "user‮ ⁦// Check if admin⁩ ⁦") {
    console.log("You are an admin.");
}

What about this-

2    var accessLevel = “user”;
3    if (accessLevel != "user‮ ⁦// Check if admin⁩ ⁦") {
4    console.log("You are an admin.");
5    }

Did you catch the issue with above source code? If not, try to examine the code snippet.

Here, this is a case of Stretched String type of attack. Code in line 3 makes it looks like the conditional expression checks whether the accessLevel variable is equal to the value of user.

Have you seen the comment at the end of line about logic checks, and it may look harmless but the truth is  quite different. The use of unicode bidirectional characters on line 3 hides actual string value of accessLevel variable check. Here the real line 3 as the compiler would run it:

If (accessLevel != "user // Check if admin") {

There are several types of abusing bidirectional control characters to inject malicious code into source: Stretched String, Commenting-Out, Invisible Functions and Homoglyph Function. Though the use of bidirectional control characters is a novel approach, this kind of attack is not actually new and has been cited in prior mailing lists and discussion boards. 

How To Detect Trojan Source Attacks In Source Code?

Code editing and code review processes may be on platforms or tools that don’t support highlighting of these dangerous bidirectional unicode characters. Means you may already have those bidirectional characters in your codebase. How do you find out if you have source code with bidirectional unicode characters?

To help with that, anti trojan source scans a directory, or reads input from standard input STDIN) and scants it for any such unicode characters that may be present in the text. 

You can use npx to scan files as-

npx anti-trojan-source --files='src/**/*.js'

Or if you’d like to use it as a library in Javascript project:

import { hasTrojanSource } from 'anti-trojan-source'
const isDangerous = hasTrojanSource({
  sourceText: 'if (accessLevel != "user‮ ⁦// Check if admin⁩ ⁦") {'
})

Preventing Trojan Source Attacks In JavaScript With ESLint-

Better than only finding existing issues is to proactively safeguard codebase to make sure that no Trojan Source attacks make their way to source code at all. Generally Javascript community rely on ESLint and its various plugins to enable control code quality and code style standards. 

Hence, with the use of eslint-plugin-anti-trojan-source, now you can include ESLint plugin to ensure that none of programmers or continuous integration and build systems are wrongly merging code that is potentially malicious because of bidirectional unicode characters.

Let’s see an example of ESLint configuration for Javascript project:

"eslintConfig": {
    "plugins": [
        "anti-trojan-source"
    ],
    "rules": {
        "anti-trojan-source/no-bidi": "error"
    }
}

Example output for a vulnerable code that slipped into codebase:

$ npm run lint
 
​​/Users/lirantal/projects/repos/@gigsboat/cli/index.js
  1:1  error  Detected potential trojan source attack with unicode bidi introduced in this comment: '‮ } ⁦if (isAdmin)⁩ ⁦ begin admins only '  anti-trojan-source/no-bidi
  1:1  error  Detected potential trojan source attack with unicode bidi introduced in this comment: ' end admin only ‮ { ⁦'                    anti-trojan-source/no-bidi
 
/Users/lirantal/projects/repos/@gigsboat/cli/lib/helper.js
  2:1  error  Detected potential trojan source attack with unicode bidi introduced in this code: '"user‮ ⁦// Check if admin

How Is The Ecosystem Mitigating Trojan Source Attacks?

IDEs like VS Code have released versions to highlight these unicode characters so that developers would take note of them and act with proper context at the time of code reviewing and code editing. Similarly, GitHub published warnings so that code bases will highlight the use of these potentially dangerous trojan on Githubs if they use bidirectional characters:

But keep in mind that, not all types of trojan malware attacks are being highlighted by Github. For instance, consider the following case that dubs invisible functions-

1 #!/usr/bin/env node
2 
3 function isAdmin() {
4       return false;
5 }
6
7 function isAdmin() {
8      return true;
9 }
10
11 if (isAdmin()) {
12   console.log(“You are an admin\n”);
13 } else {
14  console.log(“You are NOT an admin.\n”);
15 }

As you see in the above javascript code, there’re not any warnings from GitHub when reviewing this code. What’s happening there?

The function declaration on line number 7 is written with the use of zero-width space unicode control character identified as U200B, that makes it look visually as if this is the case of legitimate function isAdmin function.

You can verify this if we print out the code using tool such as bat, that is a clone of UNIX cat tool, with better syntax highlighting and Git integration:

1 #!/usr/bin/env node
2
3 function isAdmin() {
4    return false;
5 }
6
7 function is<U+200B>Admin() {
8    return return;
9 }
10
11 if (is<U<U+200B>Admin() {
12    console.log(“You are an admin\n”);
13 } else {
14   console.log(“You are NOT an admin.\n”);
15 }

Should Compilers And Runtimes Mitigate Trojan Source Attacks?

Now what about language runtimes and compilers? Lots of languages, including Node.js, have decided against updating their compiler from denying unicode characters. Effectively transitioning the risk to code editors and humans, those need to be more careful when reading code and performing code review processes.

Some language runtimes such as Zig have considered to employ a compiler error when detecting the use of unicode bidirectional characters in source code, and allow to bypass the errors with comment.


Thursday, July 15, 2021

10 Best JavaScript Animation Libraries In 2021

 10 Best JavaScript Animation Libraries In 2021

You can add simple animations by just using simple CSS animations. But for more complex or advanced effects, Javascript is a better tool. Using javascript, creating javascript is more challenging than using CSS. Javascript animations are carried out by including gradual adjustments to a component’s fashion. You can add them in-line as a part of your code, or embed them in different objects. When delivering, these changes are alluded to as up by a timer. Also, you can manage the continuity of animations by adjusting the time interval of adjustments. Here is a list of Javascript animation libraries that you can use.

Top 10 Javascript Animation Libraries To In 2021-

1. Velocity.js-

It combines the best of CSS transitions and jQuery. It rates near about 17K stars on GitHub and support of prominent users such as Whatsapp and Mailchimp. Delaying, reversing, looping, hiding/showing elements, property math(+, -, *, /), and hardware acceleration, etc part of features. Velocity.js can be used to scroll browser windows. It can work with jQuery loaded in your browser and also independent of it, and can undo previous animations.  

2. Anime.js-

It is a light-weight animation library having 350 stars on GitHub. You should use it to animate HTML, CSS, JS, SVG and DOM attributes. With in-built staggering system, it can create ripples, directional actions, follow-through and overlapping results seem easy. It can be used on each timing and property. You can do lots of things with built-in callback and management capabilities. For occasion, you may play, pause, manage, reverse and set off occasions in sync. 

3. GreenSockJS-

This library works with a bunch of small Javascript file which makes animations more beautiful. It chains various animation properties and eliminates bugs from the web browser. GreenSock library is compatible with lots of software like HTML5, SVG, jQuery, Canvas, CSS, new browsers, old browsers, React, Vue and EaseIJS. With this, it is smooth and packed with beautiful animation features. Apart from this, GreenShock is modular, means you have freedom to choose and select the part of library you need for your project.

4. Mo.js-

It is has a big half to play in animations, and is a choice with which you can male an impression too. With various tutorials and demos to help out, beginners probably won’t find it difficult to make geometrical shapes and time animations. You can do a lot with APIs. Within toolkit, you’ll find a Curve Editor and Timeline Editor to help you construct your animations, and a Player to manage your animations. There are different modules for staggering, easing, timeline and so on.

5. Vivus.js-

If you need a pen drawing on a display screen in real-time, you’ll hit the mark with Vivus. It helps you to animate SVGs giving the impression of being drawn. It is quick and light-weight as it has no dependencies. You can select any of the accessible animations- Delayed, Sync or one by one. Otherwise you can also create customized script to attract your SVG. For more flexibility, you can override animation of each path with an easy JavaScript performance.

6. ScrollReveal JS-

You can animate your web elements as they scroll into view, ScrollReveal won’t disappoint. This simple library has zero dependencies and 18.5K+ stars on GitHub. It supports different types of effects and works well with web and mobile browsers. It works with bare-bones configuration, hence you can use it as a canvas for creativity. To increase the effect of animations, the creators suggest that you use it sparingly.

7. Lottie-

This lightweight animated graphics library maintains a good balance between high-quality graphics and their rendering. This makes the app compact and includes lots of useful features. It can be used for iOS, IoTs and web platforms without need of extra software. It can run on any web browser without any problem, which supports Javascript. It’s storing format for animations is in plain text which is easy to understand. As the text data is stored in JSON format, it can be easily simulated with any Javascript environment. It has 30 thousand stars on GitHub.

8. Magic Animations-

This is an impressive animation library with unique animations and having 6000 stars on GitHub. Similar to animate, one can implement this library by including the CSS file. Animations in this can be implemented with jQuery and offers a nice demo. File size is small when compared with Animate and is mostly known for its unique animations, like magic effects, bomb effects and foolish effects.  

9. PopMotion-

It is a functional Javascript animation library that can work with an API which accept numbers as inputs like React and Three JS. Popmotion is compact in size at 11.7kB but combines features. It features animations like keyframes, decay, the timeline for synchronizing various instances and so on.

10. Three.js-

Three.js library has 600+ starts on GitHub. It is depending on WebGL to create and render 3D animations within browser. It also has a documentation  to help you. While using the Three.js editor, you can create a scene, add geometrical figures and regulate lighting and digicam. The texture, materials, object, color and fogging can be tweaked and file printed to your venture. 

Wrap Up-

Animation is still a popular trend in the industry. So knowing the javascript animation libraries for development will help you in attractive software development. If you are thinking of developing a software product that includes animation, consult with Solace experts. We are here to help you through consultation and development. You can also hire javascript developers of Solace team for an effective development. Connect with solace and get a free quote for software development. We will be happy to help you.


Wednesday, May 26, 2021

Dart Vs JavaScript- A Comparison That You Must Know

 

Dart vs Javascript A comparison that you must know

Javascript gained popularity when it came in the world of cross platform mobile app development and server-side development. Node.js framework can be used for both frontend and backend development, so it became more popular among web developers. With the use of React native by facebook, mobile app developers also started to shift towards Javascript. So javascript is holding the position of most popular programming language. Google created the Flutter framework for cross-platform mobile application development. Flutter framework uses Dart programming language. Most of you might have a question of what’s the difference between dart and javascript. How do they differ? To know the answer to all this, let us see the comparison of Dart vs javascript.

What Is Dart?

Dart is a programming language used by Flutter framework. It was initially used at Google to build server, web and mobile applications. Dart compiles the source code like javascript. It gained more attention in 2017 when google announced Flutter beta for cross platform mobile app development. These days developers are eager to adopt Flutter, but they nee dto learn Dart to get started.

Advantages Of Dart-

  • Dart is open-source
  • It is supported by Google and runs seamlessly on Google Cloud platform
  • Faster than Javascript
  • It is type-safe and compiled with both AOT and JIT compilers
  • Dart is scalable across projects
  • Extensively used for flutter mobile UI framework

What Is Javascript?

Javascript is a language for rendering web pages along with HTML and CSS technologies. Later on, javascript extended its arm to server-side and mobile app development. Javascript is a mature, stable programming language and supports both OOPS and functional programming style. Because of the dynamic nature, it doesn’t need compilation of code at client side. Javascript jas its own package managers such as NPM. Javascript became the most preferred and popular programming language since facebook launched the React and React native frameworks for web and mobile app development.

Advantages Of JavaScript-

  • Javascript is fast, flexible and light-weight
  • It can be used for web apps and mobile apps.
  • Javascript can be used for both frontend and backend
  • Has huge community and great frameworks available online 

Dart Vs JavaScript- A Comparison

1. Popularity-

Dart is a new language. It has got a huge attention among mobile developers as an alternative to React native. Popular companies like Google, Alibaba are using Flutter.

Right now, javascript is everywhere and many companies are using javascript frameworks for developing mobile and web applications. It can be used for server-side applications and backends so most of the developers are learning javascript as a language. 

2. Learning Curve-

Learning Dart can be overwhelming for beginners as there are limited courses available online for Dart programming language. Google has documentation of Dart on its official website that helps programmers to learn Dart concepts easily. 

Knowledge of basic programming concepts helps you to learn the Javascript. As it is an old programming language, there are lots of online courses and tutorials through which developers can learn Javascript. 

3. Frontend Vs Backend-

Now, Dart is actively used with Flutter for developing the frontend of cross-platform mobile applications. It can be used for web development, but there is no mention of Dart being used for backend development.

Previously javascript was used for frontend web development with CSS and HTML. But with the rise of Node.js framework, now Javascript is used for server-side and backend development also.

4. Commercial Use-

Dart was developed and used by Google. Apart from Google there are some big companies like Alibaba that also adopted Flutter and Dart for developing cross-platform mobile apps. 

Javascript is used by big companies for developing both web and cross-platform mobile applications. Lots of popular companies like Reddit, instagram, eBay, Slack, Airbnb are using Javascript.

Know more at- https://solaceinfotech.com/blog/dart-vs-javascript-a-comparison-that-you-must-know/


Thursday, April 29, 2021

Top 7 Javascript TreeGrid Libraries/Widgets In 2021

 


We all know that Javascript is a high-level, dynamic and untyped programming language. Basically it creates an interactive and phenomenal impact on web browsers. Web app development is easy with Javascript and HTML tables, Javascript components are becoming instinctive string between customer and end-user. HTML tables with lots of data can be controlled with the help of libraries. One of such popular and convenient approach is the Javascript tree component that makes data rich apps. It is a way to deal with data that gives various advantages to end client. And hence UI trees give an opportunity to show huge amounts of data in a compact way. It also shows the inadequacy to work with large trees. The data from such trees don’t fit in the recognizable area of interfaces. 

TreeTable component appeared as a reasonable response to the complexity of work with UI Trees. Whereas, TreeTable is a great DataGrid that allows convenient data presentation in an even structure. Also, it plays out a tree-like, various leveled gathering of even data like Tree widget. Don’t get confused about the TreeTable component with features similar to DataGrid Rows and Columns grouping. Some of the SpreadSheet JS widgets may have various hierarchical data gathering widgets but TreeTable is a modern and complex solution as it bunches an entire array of information.

Here we will see the details of 7 best TreeGrid libraries to use in 2021. But before digging into TreeTable libraries let us see what is TreeGrid?

What Is TreeGrid?

It is a method of arranging table data as a rundown of hierarchical tables. TreeGrid enables developers to make tree-like lists where entire tables are used as “branches”. Let us see the features of TreeGrid. 

Features Of TreeGrid-

1. End-to-end Sorting- 

Table things can be arranged with a single snap on the header of a segment. You can use the sort work for explicit sorting conduct.

2. Editable-

TreeTable has a full scope of grid manipulation. You can modify its component by composing the new value in the data field or choosing among drop-down list that can be provided with checkboxes for better convenience.

3. Selection Mode-

Due to TreeGrid, you can choose data in one of the accessible modes: cell, line,segment, multi section, multi-cell, multi-line, square or zone determination mode.

4. Data Export-

This Javascript TreeTable component allows trading data to PNG, PDF and Excel documents for extra preparation. You can also characterize the appearance of subsequent table by including various export options. 

5. Clip-board-

Clipboard support lets you to reorder things inside the TreeTable component and paste data to other components. This element works in modes like- ‘choice’, ‘square’ and rehash.

6. Filtering- 

TreeTable supports customer side filtering. You can also use built-in or custom filters. According to the data,you can use one of the channels for required section: date filter, number filter, rich select filter, multi combo filter, etc.

Top 7 Treegrid Libraries And Widgets-

1. jQuery TreeTable-

It is a module for the jQuery Javascript library. This shows the tree as an HTML table. Widgets lets you to create a couple of segments to show some data other than tree where tree depth does not have any limit. jQuery JS library is light and quick that rearranges the web development process. It includes simple to use APIs that different programs support. Some of its great features are- Sorting, Filtering, Paging, Data export, row editing and validation, row details, columns resizing, column hierarchy,  Cells formatting, custom cells rendering, keyboard navigation etc.

2. Webix TreeTable Widget-

It is a most professional and functional widget based on Webix DataGrid widget and having the highest performance web control. Some of the great features of Webix TreeTable are, clipboard support, advanced data filters, embedded chart lines(SparkLines), rowspan, colspan and grid grouping. This widget improves ability to change the width of all fields, create vertical headers and throughout elaboration of drag-n-drop individually for rows and columns. 

3. Treegrid-

It is a DHTML component which allows you to display and edit data in grid, table, grid tree, tree view or histogram on an HTML page. It is a rapid AJAX grid with lots of advanced features like advanced formulas and cell calculations. TreeGrid component allows you to load data in XML & JSON formats. This widget is available under the basic, standard, personal and Grand licenses.

Some of the great features of Treegrid are- Creating gantt charts, pivot tables, update and display custom Javascript objects and external objects like Adobe Flash, Microsoft silverlight, different editing masks, bulk cell changes, calender component, exporting to MS excel or other spreadsheets which handle XLSX, XLS, CSV or HTML table files, localization to any languages etc.

4. Sencha TreeGrid Widget-

It has Javascript structure which gives different instant UI parts to create high-load, cross-stage web apps. Important component of this javascript Treegrid library is its great TreeGrid widget. Some of the great features of Sencha TreeGrid widgets are- keyboard navigation, numerous headers, sorting, bifurcating, preloading hubs with single AJAX demand, rearranging/resizing header, custom symbols and so on. 

5. Syncfusion TreeGrid Widget-

It provides 1600+ components and a framework for mobile, web and desktop development. With various customization choices, you can deliver ideal client experience while saving money and time. It is an element rich segment to show data in a plain arrangement. Its broad scope of functionalities includes, editing, data binding, excel-like filtering, custom sorting, row aggregation, selection, excel support, CSV and PDF formats.

6. DHTMLX TreeGrid Component​-

It is an extension of the dhtmlxGrid component which complements the functionality of powerful data grid with competent XML parsing, extensible strings, pagination support and elegant rendering. Because of based on AJAX, Treegrid javascript component with dynamic loading can display unlimited rows and processing huge data on the fly. Also, it provides end-users with convenient built-in editing, advanced row and column dragging, split mode, posts sorting and coloring, and some mathematical functions. DHTMLX TreeGrid can be easily styled by using CSS and built-in skins. 

7. Ignite UI Tree Grid-

igTreeGrid library provides hierarchical data by combining principles of tabular and tree data into a single control. It inherits the igGrid control and hence enjoys lots of features and functionality like igGrid. Also some features contrast in function and implementation to best suit the needs of hierarchical data.

For adaptability and flexibility, the treegrid has expansion indicator, which can be delivered inline in main data section or  in the independent segment. Expansion indicator can be modified with an alternate look and feel to accomplish custom visualizations.

Final Words-

Purpose of TreeGrid Javascript libraries is to bring the concept of tree and table function together in a single widget. Here we’ve seen top 7 Javascript TreeGrid libraries to use in 2021. Also, on the basis of functionalities, the Webix JS and DXTMLX libraries are important open-source treeGrid libraries that help structure the tree into an editable grid and hence, easy to work with huge amount of data.

If you are confused about choosing the TreeGrid library, consult with solace experts. We are here to help you through consultation and development. You can also hire javascript developers of Solace team for an effective Javascript development. Connect with Solace and get a free quote for software development with javascript. We will be happy to help you.


Tuesday, February 16, 2021

10 JavaScript Data Table Libraries That You Should Know In 2021

 

Javascript is a deciphered dynamic and untyped programming language, which establishes an interactive and phenomenal environment inside internet browsers on the internet. These days, Javascript components have become an intuitive string between customer and end user. These javascript data tables contain massive measures of information that you can handle with the help of libraries to allow additional assistance.

Data table library empowers the manipulation of HTML tables with big data set and also provides extended features like custom sorts, complex conditional styles, advanced searches, pagination, custom filters and line editing for your table. For web app development, it becomes easy for web app development to be an important and easy pursuit for the Javascript UI library and framework. It is beneficial for web developers to use these libraries and frameworks for easily building a clean, easy, consistent and attractive user interface.

Here we will discuss some of the most used JS data table libraries/grid and resource that developers may find useful and they could easily add grid functionality to tables, various functions like custom sorting, paging and advanced filtering on a huge data set.  

10 Best JavaScript Data table libraries of 2021-

There are various factors that should be considered while choosing the most ideal Javascript Data table library. Some of these are as follows- 

  • Creating components inventory
  • Shortlisting comprehensive and relevant components
  • Looking for ready-made components according to business needs
  • Looking for similar functionality and thereafter choosing the one out of them.

1. Fancygrid-

It is a javascript table library loaded with chart integration and server communication. This library works well with Angular 1 and 2, jQuery, VueJs and Web Components.ule. Fancygrid includes more than 25 features like sorting, paging, filtering, validation, touch support, REStful and so on. It is a plugin-free table library without any dependency and includes ample elegant API, samples, professional support, detailed documentation for convenience. One of the major drawbacks of this library is- it does not have mobile support.

2. Datatables-

Datatables is a plugin used to provide extra functionality for your tables like filtering, sorting, pagination and custom theming. It offers detailed documentation so you can handle look, feel, and work of your table. Wide range of features and customization makes it lovable among developers community. Another aspect of Datatable is that it offers a premium support via their forum that you get access to by purchasing one of their licenses. It offers some notable features like- column sorting, searching a string, individual column filtering, AJAX, export buttons, custom filtering, pagination, server-side processing, column reorder, and responsive extension.

3. Anygrids-

You can quickly create interactive tables from Javascript arrays, JSON formatted data, AJAX data sources with this vanilla library. One can include library in your project and just keep working on, without any adjustments. It allows you to filter, sort and group your data, use expanding table rows with custom data render, custom sparklines, use packaged themes, column calculation and pagination. New features are released consistently each month to make the customization process easier.

4. Ngx Table-

It is an angular component to present large and complex data. It was built for modern browsers using TypeScript, CSS3, and HTML5 and Angular 8.0.0. This is a sister project of angular-data-table designed for Angular 1.x. Ngx table handles large data sets. It has some notable features like- column reordering & resizing, horizontal & vertical scrolling, expressive header and cell templates, client/server-side pagination & sorting, material theme, and no external dependencies, row detail view.

5. Ag-grid-

It is designed to integrate seamlessly with Angular 2+, but it also works with all major JavaScript frameworks like Angular, React and Vue.js. “Ag” stands for agnostic, means it is available for various JS frameworks. Main purpose of Ag-grid is to provide a data grid that enterprise software can use for building applications like reporting and data analytics, business workflow and data entry. If you are searching for a table builder for complex project, this library is a perfect fit. It has been optimized for performance, if you have to handle big data sets. 

Ag-grid supports real-time updates and can handle hundreds of updates per second. It comes with two versions: Enterprise version and community version. Community version is covered by MIT license and includes basic features. Enterprise license with all available features ahs three options- Single application developer, multiple application developer and deployment license. Basic version comes with features like cell editing, aligned grids, CSV export, pagination, internationalization, real time updating data, column pinning, column moving, column groups, column resizing etc.

6. Handsontable-

It is one of the best JavaScript data table that gives an impression of spreadsheet, provides easy data validation, data binding, data validation, sorting, filtering and CRUD operations also. Handsonable library is easy to work with and customized as required. It includes a Typescript definition file and also works well with most popular frameworks of industry like Angular, vue and react.  Product can be extended and edited with custom plugins and adjusted with source code. There are lots of comprehensive API, useful tutorials and community support. 

7. Bootstrap Table-

It is a feature-rich and lightweight table plugin that provides all the features needed to perform minimal development time. This plugin is maintained by thousands of contributors. Because of the large community and active contributors it provides great support for its users. It has amazing features like- responsive web design, scrollable table with fixed headers, powerful pagination and localization, simple column sorting with a click, get data in JSON format using AJAX etc.

8. Backgrid.js-

It is a free javascript tables that helps to build semantic and also easily styleable datatable. It offers simple and easy way that makes things easy and convenient. As it is lightweight, it can easily be fully reactive and modular. The core elements helps to edit and display data. Also, you can create a customized API with Backgrid.js library if basic functionality is not enough.

9. Vuetable-

Vuetable is a Vue.js component that will automatically request (JSON) data from the server and display it in an HTML table with swappable/extensible pagination sub-component. One can add buttons to each row and hook an event to it. It can work with data from API endpoint or existing data array/object. Some of the notable features of vuetable are – define fields to map JSON data structure for display, customize field data display with formatter if required, optional detail row to display additional data for each row, advanced field customization can be done via scoped slot and also field component. 

10. React Virtualized-

It is heavily optimized for performance when the dataset is huge. React-virtualized is not exactly a table library, it is react component to efficiently render large lists and tabular data. You can go with it when you want to manage a large set of data. It has a great support with detailed documentation and great active community. 


Friday, January 22, 2021

Aurelia Vs AngularJS : Which One To Choose?

 


In the web development world and javascript world, we’ve seen a lot of paradigms come and go. But one paradigm has stuck around: the single-page web application. AngularJS is one of the most popular frameworks backed by Google, and it offers quick, easy development of rich, client-side applications by the use of declarative two-way data binding. AngularJS is used by popular companies like Amazon and Pluralsight. 

Whereas, the Aurelia framework was released a couple months prior to Angular 2, and also serves as a great choice of SPA framework with a quickly growing audience. Aurelia, has become a popular choice for rich, client-side applications. Aurelia targets the same problem space as AngularJS. However, Aurelia uses a modern approach to ease development and solve a lot of the problems that plagued AngularJS.  

So What’s the difference between Aurelia and Angular? Before starting comparison, let us see What is Angular and What is Aurelia?

Aurelia-

Aurelia was backed by Durandal Inc and was licensed under the MIT license. It is an open-source framework and provides great rendering speed, very good memory efficiency, unidirectional data flow which is safer, higher standards of compliance, greater integration compatibility with different other platforms or frameworks. Deloitte, Chegg, dev and many such popular companies make use of Aurelia. Here are some of the features of Aurelia-

  • Broad Language Support
  • Two-Way Databinding
  • Routing & UI Composition
  • Testable

Angular-

AngularJS is a front-end web framework supported by Google. This framework makes use of HTML as your template language and allows you to extend HTML’s syntax to express app’s components more clearly. Amazon, snapchat, Tinder and many more popular brands uses Angular.js. Let us see features of Angular.

  • Templates
  • MVC Framework
  • Access to the POJO Model
  • Unit Testing Facilities

Aurelia vs Angular-

1. MV* Approach-

Aurelia follows the Model-View approach. There is no need to specify the particular controllers of view-models; the naming conventions will do that. For instance-

“AnyFile.html”:  Any file loaded under router-view or called at the time of instantiating Aurelia App.
 <template>
 <!-- HTML and Aurelia(Model) code goes here -->
 </template>
 “AnyFile.js”: Controller of the Anyfile.html view-model.
 export class AnyFile {
 constructor() {
} 
}

When comparing with Angular, you will see the difference in watching MV* components. One of the big disadvantage of AngularJS is that it has a very sheer learning curve. You must know its internals, the complete digest cycle pretty well and have to know the effect on performance while using $watch expressions and filters. Whereas Aurelia is simple and has a smooth learning curve.

2. Language Support-

API’s of Aurelia are deliberately designed to be employed naturally from today’s and tomorrow’s useful web programming languages.  Aurelia supports Typescript ES2015, ES5, ES2016 and it is very important and gives you high extensibility. Developing web apps by using ES6 is not a new thing. There are some solutions that can allow you to write Angular apps using ES6. 

Aurelia supports for ES6 and Gulpfile with a customized build system to ensure your ES6 down to ES5 compatible code.

3. Data Binding-

Aurelia supports two types of data-binding-

1. One way data binding

2. Two way data binding

Using adaptive techniques, one can choose the most appropriate way to observe each property in your model and automatically synchronize UI with best-in-class performance. For instance-

One way data binding-

<!-- these have the same result -->
<input value.bind="anyValue & oneWay>
<input value.one-way="anyValue">

Two-way Data-Binding:

<!-- these have the same result -->
<input value.bind="anyValue & twoWay>
<input value.two-way="anyValue">

Angular also allows two-way data binding but for beginners it is tough to adopt the Angular way. With a large number of filters, watches, a complex DOM structure etc. you will find performance issues. 

Regardless of a few enhancements are implemented, later on, they are not much effective. Whereas, Aurelia is less complex and easy to learn. There are very less chances of performance issues to implement two-way data binding.

4. Services-

Know more at- https://solaceinfotech.com/blog/aurelia-vs-angularjs-which-one-to-choose/

Friday, December 18, 2020

What’s New In React 17?

 


React is one of the most popular Javascript library and it is an efficient, declarative and flexible Javascript library used to build user interfaces. It has more than 156000 starts on GitHub and is one of the vibrant frontend communities building great applications. React has taken some important steps to improve the developer experience and efficiency of react-built applications. Here we’ll see changes in react v17. 

Know the most common mistakes that you must avoid in react development at- Most Common Mistakes To Avoid In React Development

What’s New In React 17?

1. v17 Allows Gradual React Upgrades-

When you update your entire application from React 16 to 17, the application may work well. But if the codebase was written more than few years ago and is not maintained regularly, it may cause difficulty for you. Although two versions of React can be utilized on the website, it was not stable and caused event issues until react v17 came into the focus. Some improvements have been made to the React event system so as to allow gradual upgrades. React 17 is an essential release because the changes could break down.

2. No Event Pooling-

Starting from this new version, event pooling optimization has been removed from React because of confusion and the simple fact that doesn’t improve modern browser performance.

function handleChange(e) {
  setData(data => ({
    ...data,
    // This crashes in React 16 and earlier:
    text: e.target.value
  }));
}

The team of React calls this a behavior change and has labeled it breaking, although they have not seen it break anything at Facebook, so the chances are very low. Also, e.persist() is still available on event objects, in spite of the fact that it does not do anything.

3. Changes To Event Delegation-

In react components, usually you write event handlers inline:

<button onClick={handleClick}>

The vanilla DOM equivalent to this code is like:

myButton.addEventListener('click', handleClick);

React does not connect them to the DOM nodes you declare on most events. Instead, it adds one handler per event type directly at the document node. This is called a delegation for event. It makes it simple to add new features like replaying events, apart from its efficiency advantages for large apps. From its initial release, React has done event delegation automatically. When DOM event initiates on a document, React understands which component to call and then the React event goes upwards through components. Whereas, in reality, the native event has already bubbled up to document level where React installs its event handlers. 

4. Effect Cleanup Timing-

New version makes the useEffect Hook cleanup function timing more consistent.

useEffect(() => {
  // This is the effect itself.
  return () => {    // This is its cleanup.  };});

In the previous version React 16, the effect cleanup function is run synchronously, that don’t delay screen updates and which React runs asynchronously by default. The React team has discovered that this synchronous process is not so ideal, just like it is not with componentWillMount for large applications when the user switches tabs.

This new version of react brings some new changes. The effect cleanup function will work asynchronously like others and if component is un-mounting, the cleanup will only run after updates are shown on screen.

5. Removing Private Exports-

For web, react native used to rely on specific internals of the system, but this dependency became weak and used to clash. These private exports ended in React 17. We know that React native for web was the only project that used them and that migration to new method has been already completed which doesn’t rely on these private exports. This means that old React Native Web version won’t be compatible with React 17 but still work with updated versions. In reality, it don’t affect because React Native had to release new versions to adjust to changes in its internal react.  

6. New Lifecycle Methods-

Two new lifecycle methods are switched with deprecated lifecycle methods- getDerivedStateFromProps and getSnapShotBeforeUpdateSome processes are replaced by these new lifecycle methods. For example, componentWillUpdate can be replaced by getDerivedStateFromPropstogether with shouldComponentUpdatecomponentWillMount should be removed altogether for async rendering.

getDerivedStateFromProps

This method is bound to replace componentWillReceiveProps and componentWillUpdate and will be called after a component is created and when it received new props.

This returns an object to update state when props change or null when there is not change in state.

state = { cachedSomeProp: null };
static getDerivedStateFromProps(nextProps, prevState) {
return {
cachedSomeProp: nextProps.someProp,
..
};
}

getSnapshotBeforeUpdate-

It manages the component changes and replaces componentWillUpdate efficiently and operates with componentDidUpdate. This is called and returns the value to the componentDidUpdate that handles the changes before DOM updates:

class ScrollingList extends React.Component {
listRef = null;
getSnapshotBeforeUpdate(prevProps, prevState) {
if (prevProps.list.length < this.props.list.length) {
  return (
    this.listRef.scrollHeight - this.listRef.scrollTop
  );
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot !== null) {
  this.listRef.scrollTop =
    this.listRef.scrollHeight - snapshot;
}
}
render() {
return (
{/* …contents… */}
);
}
setListRef = ref => {
this.listRef = ref;
};
}

7. Browser Alignment-

Some changes have been made to event system in React, which includes:

  • To avoid confusions like firing when scrolling through child elements, the onScroll event no longer bubbles.
  • The events React onBlur and onFocus have now switched to using native focusin and focusout events internally, better matching react’s existing behavior and even providing more information.
  • Capture phrases events like onClickCapture now use actual browser capture phrase listeners

These changes align React more closely with how browsers behave and improve interoperability.

You can also know the reasons to render React on server side at- Why You Should Render React On Server Side?