Shulou(Shulou.com)06/03 Report--

As a pure front-end control set, WijmoJS adheres to the design concept of "as fast as lightning, touch first", while providing quality services and products, focus on enterprise application development, constantly optimize product architecture, and keep pace with the times. In addition to taking the lead in supporting AngularJS in the world, it has been fully applied in mainstream frameworks such as React, Vuejs, TypeScript, Ionic and so on.

Recently, WijmoJS 2018V2 has officially released an online Web designer based on VSCode/, which can dynamically design Web pages and generate code, provide SASS support, and greatly improve the stability and speed of the control set.

The main contents of this update are:

WijmoJS designer-the era of no-code configuration is coming

So far, the WijmoJS pure front-end control set has been very easy for front-end development to use, but it still needs to write code. WijmoJS 2018V2 announced that this approach will be completely changed. WijmoJS now has a designer for creating and customizing front-end controls, including two beta versions, one that is perfectly integrated with Visual Studio Code and the other an online Web designer that provides real-time preview and editing of page properties.

VSCode designer: used to customize WijmoJS components under the Angular framework

Web online designer for creating and customizing wijmoJS controls

VSCode designer

This designer is an extension of VSCode. After installation, it adds "Wijmo Designer..." above the WijmoJS components under each Angular framework. Operation. When you click the action button, it opens a design interface for customizing that particular component. Developers can change properties and binding events in real time and save the changes back to the Angular application.

To install this extension in VSCode, click the install button in the Designer settings on VS Marketplace. Alternatively, you can search for "wijmo" in VSCode's extension manager and install it from there.

Reload VSCode after installation. Then open an Angular application that uses the WijmoJS control and try to start the designer.

Web online designer

This designer is a Web application for creating and customizing WijmoJS controls. Developers can run this designer in any browser. It allows you to add controls to the design surface and then customize them to your liking. After the configuration is complete, you can copy the generated code into your own application.

Web-based Wijmo Designer

The code generated by this designer is pure HTML and JavaScript. The generated code includes references, host elements, and JavaScript scripts needed to initialize the control.

Support for Angular 6 and TypeScript 2.7

WijmoJS already fully supports Angular version 6.0.0. What is currently being done is to upgrade all Demo samples to Angular V6 and the TypeScript version supported by WijmoJS to V2.7.

New React / Redux cryptocurrency tracking application

This update adds a cryptocurrency tracking application to the WijmoJS control set using React and Redux, which is a financial dashboard that can be used to track cryptocurrency values, which are modeled after a production application developed by the user. Using modern design patterns of React / Redux and various WijmoJS controls, you can help users better evaluate and develop WijmoJS applications.

Wijmo Crypto Currency App

Integration enhancements that support Vue V2

With the continuous development of Vue, WijmoJS is also constantly improving to adapt to its changes. WijmoJS has added a lot of nice features to Vue V2 support in this update. For example, WijmoJS subcomponents now work correctly in dynamic scenarios, such as v-for and v-if instructions.

Child components in Vue.js

In addition, WijmoJS adds WjFlexGridDetail components and new examples.

Application of Web Components in WijmoJS

A beta version of WijmoJS's Web component interoperability has been launched, which exposes WijmoJS controls as Web components, or more specifically, custom elements. The WijmoJS Web component allows users to add a WijmoJS control to a HTML page declaratively and manipulate it as a common DOM element without using any other framework. Some browsers that do not fully support the Web component standard may need some additional Polyfill support.

The WijmoJS Web component implements the key points of the current state:

The WijmoJS "top-level" Web component of the WijmoJS control, such as the wjc-flex-grid component that represents the FlexGrid control, inherits from the corresponding control class. For example, the WjcFlexGrid component class extends the FlexGrid control class. This also means that when WijmoJS is used in "Web component mode", the underlying WijmoJS control class extends the HTML element class.

Subcomponents that complement top-level components, such as wjc-flex-grid-column components that define FlexGrid columns, act as wrappers for the WijmoJS classes they represent. The child component inherits directly from HTMLElementclass, and the underlying WijmoJS class instance is accessible through the component's special control properties.

You can define WijmoJS class attributes using attributes on component elements. When the property value changes, the corresponding WijmoJS class property is updated accordingly. Currently, you do not need to change the corresponding property value to change the class property value.

JavaScript code can subscribe to handlers for WijmoJS control events using the native Element.addEventListener ('event',handler) method.

The WijmoJS component does not currently use Shadow DOM. This will be resolved in future versions of interoperability. The biggest challenge now is that WijmoJS allows deep customization of the parts of its controls through CSS, and the goal of Shadow DOM is to prevent it. Currently, WijmoJS Web components and their parts can be customized in the same way as normal WijmoJS controls using global CSS.

The biggest benefit of Web components is that you can use the same components in different frameworks and benefit from the additional features of the framework, such as properties, properties, and event bindings.

With the launch of the new version, WijmoJS has added a Web Components In Angular example that demonstrates how to use WijmoJS Web components in Angular applications. Examples of other popular frameworks, such as React,Vue,Polymer, are under development.

Styles that support SASS types

WijmoJS's control style (layout, default style) was originally written in CSS. Now, however, the SASS style rewriting has been completed. In this way, Web applications developed using the pure front-end control set WijmoJS will be easier to use and more lightweight.

Developers can easily use WijmoJS's SASS file to create their own theme style. At the same time, SASS source files are provided for developers to use and customize.

Developers can choose which SASS modules to include in the application. For example, if you have a WijmoJS-Core file that contains only core modules (non-enterprise) in the project, it may be only a small part of the total CSS file, and you can choose to load only these modules to really optimize the CSS size.

WijmoJS has added support for Shadow DOM in Web Component interop.

ES6 and ESModule support

In this update, the ES6 version of the WijmoJS module (beta version) has been added, which can be found in the NpmImages folder of the WijmoJS installation package:

Wijmo-es2015-esm-min-ESM module format (ES6 import / export statements)

Wijmo-es2015-commonjs-min-in CommonJS module format

These are all the contents of the Wijmo 2018V2 version. For more detailed information, please visit the WijmoJS website.

WijmoJS-A pure front-end control set with deep support for Angular, React, and Vue

As fast as lightning, touch first. WijmoJS, a pure front-end control set, provides a more flexible operation experience for your enterprise applications. It is the first to support AngularJS in the world, and many controls such as FlexGrid and financial charts with excellent and zero dependence can provide you with an easy-to-use and easy operation experience to fully meet the needs of enterprise Web development.

About Grape City

Empowered developer! Founded in 1980, Grape City is the world's leading software and service provider integrating development tools, business intelligence solutions, and management system design tools. Xi'an Grape City is its branch in China, providing software research and development services to the global market, and providing international advanced development tools, software and R & D consulting services for the informatization of Chinese enterprises. Grape City's controls and software products have won many awards at home and abroad, and have been widely used by hundreds of thousands of enterprises, schools and government agencies around the world.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.