Dimensional Data

With the staggering increase in mobile phone users comes the need for developing high quality mobile apps. Mobile apps now also play an important and vital role for all businesses, whether small or large. Keeping the importance of mobile apps in view, a reliable and robust JavaScript framework for mobile apps is of utmost importance. When you start exploring the market, you’ll find many JavaScript libraries out there. To help you select the right JavaScript framework for developing web and mobile apps, we have compiled a comprehensive guide. Continue reading to discover why you should opt for Ext JS, the best JavaScript framework for mobile apps. What are Some Features of Ext JS, The Best JavaScript Framework for Mobile Apps? Ext JS is the best and the most comprehensive JavaScript framework for web and mobile apps. Sencha offers Ext JS with 140+ pre-tested and high-performing UI components to help developers with JavaScript app development. HTML5 calendar, grids, pivot grid, D3 adapter, trees, lists, forms, menus, toolbars, panels, windows, etc. You can easily integrate these components into your app while having the confidence that you don’t have to spend your time building and testing these professionally built components. These UI components and Ext JS JavaScript developer tools accelerate app development and reduce your time to market. Where is Sencha Touch? If you have been developing apps for mobile phones and other touch screen devices with Sencha Touch in the past, then you’ll be pleased to know that Sencha Touch has been merged with Ext JS. This is great news for all mobile app developers as now they have the best JavaScript framework for building data-intensive, cross platform web and mobile apps. You’ll be able to utilize all the awesome features provided by Ext JS to build your mobile apps and software for other touchscreen devices. Are There JavaScript Tools for Designing My Mobile App? Indeed yes! Sencha brings you state-of-the-art tools for designing, customizing, and building an app with JavaScript. There are pre-integrated tools like Sencha Themer and Stencils to support the entire design process. Sencha Themer allows you to style and create custom themes using graphical tools without writing a single line of code. You can also generate theme packages using dynamic stylesheets. Additionally, Sencha Themer includes a smart color palette that helps you apply different color schemes to different component states. There is also a palette that enables you to choose different colors from Material Design. To help you with font selection, Sencha Themer includes a font management option. With this feature, you can easily add web fonts from Google fonts. Does the Ext JS JavaScript Framework for Mobile Apps Support JavaScript Testing Tools? Again yes! At Sencha, quality is one of our top-most priorities. Hence, Sencha’s complete JavaScript mobile app framework also supports testing your apps for quality assurance. You can use Sencha Test to create unit and end-to-end tests quickly and easily. The best part is that you can execute these tests on multiple browsers simultaneously to ensure that your app runs seamlessly on all types of browsers. What is the Layout Manager in Ext JS, the Best JavaScript Framework for Mobile Apps? When developing apps for mobile devices, adjusting the user interface to render properly on small screens can turn out to be a nightmare for developers. This is no longer true […]

Testarea automatizării este esențială pentru a asigura eficacitatea software-ului. În plus, îmbunătățește viteza de execuție a testului și acoperirea. Principalul avantaj al testării de automatizare este că nu necesită intervenție umană. Acest lucru economisește o cantitate semnificativă de timp. În plus, este mai puțin predispus la erori și este cel mai probabil cea mai bună opțiune atunci când aveți de-a face cu software multilingv. Astăzi, însă, toți dezvoltatorii înțeleg cât de dificil este să testezi o aplicație pentru toate eventualele defecte. Deci, să aflăm mai multe despre Sencha WebTestIt pentru a rezolva această problemă. WebTestIt este un instrument puternic care este complet gratuit de utilizat în proiectul dvs. și are o productivitate excelentă. Acest lucru vă permite să economisiți timp și ajută la prevenirea problemelor majore, cum ar fi erorile, să explodeze pentru utilizator. În acest articol, ne vom uita la primele 5 instrumente de testare a automatizării existente în prezent pe piață. De ce este WebTestIt cel mai bun instrument de testare a automatizării? WebTestIt este un set de instrumente ușor, integrat pentru mediu de dezvoltare (IDE) pentru dezvoltarea, construirea, rularea și depanarea testelor de interfață cu utilizatorul (UI) pentru site-uri web și aplicații web. Utilizatorii pot folosi cadre populare de testare web, cum ar fi Selenium și Protractor, pentru a construi și rula teste. Crearea WebTestIt a fost pentru a servi ecosistemul mai mare de automatizare a testelor web. Ca rezultat, scade timpul de gestionare a testelor, sporind în același timp eficiența automatizării testelor. Designul WebTestIt se concentrează pe automatizarea web, pe care o poate utiliza pentru a genera teste robuste pentru tehnologii web standard, cum ar fi Selenium și Protractor în Java, Typescript sau Python. În plus, panoul „Noțiuni introductive” economisește timp de dezvoltare, oferind exemple de proiecte, aplicând automat modele de obiecte de pagină, fragmente de cod încorporate, comenzi rapide utile de la tastatură și completare inteligentă a codului. În plus, instrumentul asigură o automatizare eficientă. WebTestIt schelete proiectul dvs. pe baza celor mai bune practici și generează automat cod standard. Ca rezultat, completarea inteligentă a codului specific testului economisește timp. În plus, oferă și suport pentru limbajul Standard, permițându-vă să scrieți teste în Java, JavaScript, Typescript sau Python și ca WebTestIt să genereze cod nativ Selenium sau Protractor. În plus, cu WebTestit, puteți testa oriunde, deoarece testarea între browsere este disponibilă pe dispozitivele mobile Windows, macOS, Linux și Android. Local sau în cloud, puteți testa browsere populare sau un browser fără cap. WebTestIt gestionează, de asemenea, procesul de configurare care necesită timp, cum ar fi schelele cadrului de testare sau descărcarea automată a driverelor necesare pentru a testa aplicația pe diferite browsere. WebTestIt include, de asemenea, cele mai bune practici încorporate, cum ar fi crearea de obiecte de pagină, separarea codului de testare de cadrul de testare, crearea de teste modulare și reutilizabile, testarea între browsere și multe altele. Rezultatul sunt teste mai ușor de gestionat și mai stabile. Faceți clic aici și vizitați documentația oficială pentru a afla mai multe despre WebTestIt. Ce caracteristici premium oferă WebTestIt? Utilizatorii pot rula întreaga suită de teste sau doar cazurile de testare eșuate. De asemenea, pot rula teste pe un singur punct final sau mai multe puncte finale în paralel și pot rula teste din linia de comandă cu configurații personalizate. Acest lucru face execuția mai adaptabilă. […]

O grilă de date Javascript eficientă și robustă este vitală pentru construirea unei aplicații web cu consum mare de date. Volumele masive de date generate de întreprinderile mici și mijlocii impun nevoia de instrumente bune pentru dezvoltatori JavaScript care vă pot ajuta să construiți aplicații web capabile să gestioneze milioane de puncte de date. Ext JS îndeplinește toate cerințele dvs., de la construirea unei simple grile HTML CSS până la o grilă de date HTML 5 receptivă mai complexă și mai sofisticată. Continuați să citiți pentru instrucțiuni pas cu pas despre cum să creați o grilă HTML5 . Pentru a menține lucrurile simple, creăm o aplicație folosind doar un singur fișier HTML. Puteți pune tot codul JavaScript în același fișier. Grila finală de date JavaScript pe care o vom construi arată după cum urmează: Pasul 1: Ce fișiere trebuie să import pentru a crea grila HTML CSS? Ca prim pas, conectați foaia de stil CSS din proiectul dvs. de grilă HTML 5. Acest fișier va importa aspectul grilei CSS. Creați un fișier HTML gol și adăugați următoarea linie oriunde în antetul fișierului HTML: Apoi, trebuie să includeți biblioteca Ext JS pentru a importa obiectele HTML CSS. Adăugați asta în fișierul HTML: Pasul 2: Cum creez modelul de date pentru grila HTML CSS? Pentru a configura grila de date în JavaScript, trebuie să definiți modelul de date cu toate câmpurile grilei noastre. Acest lucru este definit în metoda onReady() pe care o puteți adăuga la secțiunea de script a fișierului HTML. Ext.onReady(funcție() { Ext.define(“com.extjsGrid.Sencha”, { extinde: „Ext.data.Model”, câmpuri: [“Produs”, “Mediu”, “Descriere”] }); Codul de mai sus definește un model de grilă com.extjsGrid.Sencha cu trei câmpuri de date numite Produs, Mediu și Descriere. Rețineți că această onReady() nu este încă completă. Mai trebuie să definim stocul de date și metoda de afișare în interiorul acestuia. Pasul 3: Cum creez depozitul de date pentru grila HTML CSS? Ca al treilea pas pentru crearea grilei de date JavaScript, trebuie să creați un depozit de date pentru grila noastră de date HTML 5. Vom crea o variabilă senchaStore care este legată de modelul nostru de date com.extjsGrid.Sencha . Vom popula grila de data folosind cheia de date a obiectului nostru de depozit de date JSON. Adăugați metoda onReady() cu următorul cod. var senchaStore = Ext.create(“Ext.data.Store”, { model: “com.extjsGrid.Sencha”, date: [ {‘Product’: ‘Ext JS’, ‘Environment’: ‘Javascript’, „Descriere”: „Ext JS este cel mai cuprinzător cadru JavaScript pentru construirea de aplicații web multiplatforme, bogate în funcții”}, {‘Produs’: ‘React Grid’, ‘Environment’: ‘React’, „Descriere”: „React Grid de la Sencha este o soluție de rețea perfectă și modernă de calitate pentru întreprindere pentru React UI, care vine cu peste 100 de funcții uimitoare ale rețelei de date.’}, {‘Product’: ‘Ext Angular’, ‘Environment’: ‘Angular’, „Descriere”: „ExtAngular oferă cel mai complet set de componente pentru construirea de aplicații web cu consum mare de date folosind Angular.’}, {‘Product’: ‘Ext React’, ‘Environment’: ‘React’, „Descriere”: „ExtReact este cel mai complet set de componente React pentru construirea de aplicații web cu consum mare de date folosind React”}, {‘Produs’: ‘ExtWebComponents’, ‘Mediu’: ‘Javascript’, „Descriere”: „ExtWebComponents oferă un set de peste 140 de componente UI pentru dezvoltarea aplicațiilor, independent de cadrul de lucru.”} ] }); Pasul 4: Cum afișez grila HTML 5? Puteți afișa grila de date HTML 5 utilizând panoul Ext JS. Adăugați următorul cod după adăugarea depozitului de date […]

Utilizarea instrumentelor de testare automatizată este o modalitate perfectă de a verifica produsul dvs. Majoritatea organizațiilor fac acest lucru des pentru a se asigura că produsele lor ating cerințele standard pentru aceasta. Anumite resurse sunt folosite pentru a efectua testarea unui produs, cunoscute sub numele de instrumente de testare automatizată . Majoritatea oamenilor care doresc să aibă succes în domeniul software-ului se asigură întotdeauna că își dezvoltă produsele și își mențin standardul. La fel cum s-a schimbat tehnologia de-a lungul anilor, testarea s-a schimbat și ele. În anii anteriori, testarea produselor se face manual, dar acum, testarea nu se face doar manual, ci are mai multă dezvoltare. Organizațiile folosesc testarea automată pentru a-și reduce volumul de muncă și pentru a se asigura că obțin rezultate corecte și precise cu testarea. Care sunt cele mai populare instrumente pentru testarea automatizării pentru a sprijini organizațiile în această problemă? Ulterior, vom discuta despre cele mai populare instrumente de testare a automatizării. Totuși, înainte de a face asta, trebuie să știm ce este testarea automată. Ce este testarea automată? Testarea automată este atunci când cineva testează produse software pentru a ști dacă îndeplinește standardul cerut. Pentru realizarea acestui proces sunt folosite instrumente automate de testare de la Sencha . Nu este nevoie de interferența umană cu procesul [1]. Când efectuați testarea automată, vă ajută să comparați rezultatele așteptate și cele reale. Acest lucru vă face să știți dacă produsul este un succes sau un eșec. Un alt aspect despre testarea automată este; că ajută la simplificarea testelor. O poți face oricând în orice perioadă dorești. Importanța testării automate? O echipă cu multe produse de dezvoltat cu siguranță nu va avea mult timp pentru a testa produsele manual. Testarea automatizării îi ajută să economisească timp. Testarea automată vă ajută, de asemenea, să vă asigurați că sunteți eficient cu testarea produselor prin acuratețe, făcând ca produsele dvs. să obțină un rezultat mai bun. Testarea manuală a unui produs vă poate face să vă obosiți și să testați un produs din când în când. Dar cu testarea automată, vă puteți testa produsele în mod regulat. Testarea automată vă ajută echipa să-și dezvolte încrederea. Acest lucru face ca produsele dezvoltate de ei să fie pregătite pentru piață. De asemenea, permite echipei dvs. să își orienteze atenția către alte proiecte neterminate. Ce este un instrument de testare a automatizării? Un instrument de testare a automatizării este un instrument pe care îl puteți utiliza pentru a efectua teste pentru produsele dvs. software. Sunt instrumente care înlocuiesc interferența umană cu tehnici de automatizare. Acestea pot funcționa pe diverse platforme mobile, web și desktop. Există tipuri de instrumente automate de testare [2] și sunt; Instrumente open-source Instrumente non-producție Instrumente desktop Instrumente fără cod Instrumente web Instrumente mobile Instrumente de producție Unelte hibride Care sunt cele mai populare instrumente pentru testarea automatizării? Există instrumente pe care clienții le-au evaluat pentru utilizare excelentă și voi împărtăși câteva dintre aceste instrumente populare aici. Sunt; LambdaTest este un instrument care este foarte potrivit atunci când vine vorba de testarea aplicațiilor web și desktop-urilor. Este un instrument bazat pe cloud pe care îl puteți utiliza pentru a efectua teste automate pe cadre precum telefoanele mobile și browserele. LambdaTest este un instrument care vă ajută să reduceți timpul alocat testării prin accelerarea procesului și, de asemenea, vă poate […]

Using Automation Testing Tools is a perfect way to go about the verification of your product. Most organizations do this often to ensure that their products attain the standard requirement for it. Certain resources are used to carry out testing on a product, known as automation testing tools. Most people who want to succeed in the software business always ensure they develop their products and maintain the standard. Like how technology has changed over the years, testing has also changed. In previous years, testing products are done manually, but now, testing is not only done manually but has more development. Organizations use automated testing to reduce their workload and ensure that they get the right and accurate results with testing. What are the most popular tools for automation testing to support organizations in this matter? Subsequently, we will discuss the most popular automation testing tools. Still, before doing that, we need to know what automated testing is. What is Automated Testing? Automated testing is when one tests software products to know if it meets the required standard. Automated testing tools by Sencha are used to carry out this process. There is no need for human interference with the process [1]. When you carry out Automated testing, it helps you compare the expected and actual results. This makes you know if the product is a success or failure. Another point about automated testing is; that it helps make tests simple. You can always do it at any period you wish. Importance of Automated Testing? A team with many products to develop will certainly not have much time to test products manually. Automation testing helps them save time. Automated testing also helps ensure that you are efficient with product testing through accuracy, making your products get a better result. Manually testing a product can make you get tired and test a product once in a while. But with automated testing, you can test your products regularly. Automated testing helps your team to build their confidence. This makes the products they developed ready for market. It also allows your team to direct their focus to other unfinished projects. What is an Automation Testing Tool? An automation testing tool is a tool that you can use in running tests over your software products. They are tools that replace human interference with automation techniques. They can work across various mobile, web, and desktop platforms. There are types of automated testing tools [2], and they are; Open-source tools Non-production tools Desktop tools Codeless tools Web tools Mobile tools Production tools Hybrid tools What are the Most Popular Tools for Automation Testing? There are tools that clients have rated for excellent usage, and I will share some of these popular tools here. They are; LambdaTest is a tool that is very suitable when it comes to testing web applications and desktops. It is a cloud-based tool that you can use to carry out automated testing on frameworks such as mobiles and browsers. LambdaTest is a tool that helps you reduce the time you put into testing by fast-tracking the process, and it can also help you perform tests simultaneously. Do you need an excellent JavaScript tool for testing? Then LambdaTest is the best stool to use. It works for other programming languages such as Python and Java. […]

An efficient and robust Javascript data grid is vital for building a data-intensive web app. The massive volumes of data generated by small and medium enterprises call out for the need of good JavaScript developer tools that can help you build web apps capable of handling millions of data points. Ext JS meets all your requirements ranging from building a simple HTML CSS grid to a more complex and sophisticated responsive HTML 5 data grid. Continue reading for step by step instructions on how to create an HTML5 grid. To keep things simple we are creating an app using just a single HTML file. You can put all the JavaScript code in the same file. The final JavaScript data grid we’ll build looks as follows: Step 1: Which Files do I Need to Import to Create HTML CSS Grid? As a first step, link the CSS stylesheet in your HTML 5 grid project. This file will import the CSS grid layout. Create an empty HTML file and add the following line anywhere in the header of the HTML file: Next, you need to include the Ext JS library to import the objects of the HTML CSS. Add this to the HTML file: Step 2: How do I Create the Data Model for the HTML CSS Grid? To set up the data grid in JavaScript, you need to define the data model with all the fields of our grid. This is defined in the onReady() method that you can add to the script section of the HTML file. Ext.onReady(function() { Ext.define(“com.extjsGrid.Sencha”, { extend: “Ext.data.Model”, fields: [“Product”, “Environment”, “Description”] }); The above code defines a grid model com.extjsGrid.Senchawith three data fields named Product, Environment and Description. Note this onReady() function is not complete yet. We still have to define the data store and display method inside it. Step 3: How do I Create the Data Store for the HTML CSS Grid? As a third step for creating the JavaScript data grid, you need to create a data store for our HTML 5 data grid. We’ll create a variable senchaStore that is tied to our com.extjsGrid.Sencha data model. We’ll populate the data grid using the data key of our JSON data store object. Append the onReady() method with the following code. var senchaStore = Ext.create(“Ext.data.Store”, { model: “com.extjsGrid.Sencha”, data: [ {‘Product’: ‘Ext JS’, ‘Environment’: ‘Javascript’, ‘Description’:’Ext JS is the most comprehensive JavaScript framework for building feature-rich, cross-platform web applications’}, {‘Product’: ‘React Grid’, ‘Environment’: ‘React’, ‘Description’:’React Grid by Sencha is a perfect modern enterprise-grade grid solution for React UI that comes with 100+ amazing data grid features.’}, {‘Product’: ‘Ext Angular’, ‘Environment’: ‘Angular’, ‘Description’:’ExtAngular provides the most complete set of components for building data-intensive web apps using Angular.’}, {‘Product’: ‘Ext React’, ‘Environment’: ‘React’, ‘Description’:’ExtReact is the most complete set of React components for building data-intensive web apps using React’}, {‘Product’: ‘ExtWebComponents’, ‘Environment’: ‘Javascript’, ‘Description’:’ExtWebComponents provides a framework-agnostic set of over 140+ UI components for application development.’} ] }); Step 4: How do I Display the HTML 5 Grid? You can display the HTML 5 data grid using the Ext JS panel. Add the following code after adding the data store of step 3. Ext.create(“Ext.grid.Panel”, { renderTo: document.body, store: senchaStore, title: “Sencha Products”, width: 1000, columns: [{ text: ‘Prodcut’, dataIndex: ‘Product’, autoSizeColumn: true }, { text: […]

Automation testing is critical for ensuring the effectiveness of the software. Additionally, it improves test execution speed and coverage. The main advantage of automation testing is that it does not require human intervention. This saves a significant amount of time. In addition, it is less prone to error and is most likely the best option when dealing with multilingual software. Today, however, all developers understand how difficult it is to test an application for all potential flaws. So, let’s learn more about Sencha WebTestIt to solve this issue. WebTestIt is a powerful tool that is completely free to use on your project and has excellent productivity. This allows you to save time and helps prevent major problems such as bugs from exploding for the user. In this article, we will look at the top 5 automation testing tools currently in the market. Why is WebTestIt the Best Automation Testing Tool? WebTestIt is a lightweight, integrated development environment (IDE) toolkit for developing, building, running, and debugging user interface (UI) tests for websites and web applications. Users can use popular web testing frameworks like Selenium and Protractor to build and run tests. The creation of WebTestIt was to serve the greater web test automation ecosystem. As a result, it decreases test management time while enhancing test automation efficiency.  WebTestIt design focuses on web automation, which it can utilize to generate robust tests for standard web technologies such as Selenium and Protractor in Java, Typescript, or Python. Furthermore, the “Getting Started” panel saves development time by providing sample projects, automatically applying page object patterns, built-in code snippets, useful keyboard shortcuts, and intelligent code completion. Furthermore, the tool ensures effective automation. WebTestIt scaffolds your project based on best practices and generates boilerplate code automatically. As a result, intelligent test-specific code completion saves time. In addition, it also provides support for Standard language, allowing you to write tests in Java, JavaScript, Typescript, or Python and have WebTestIt generate native Selenium or Protractor code.  In addition, with WebTestit, you can test anywhere because cross-browser testing is available on Windows, macOS, Linux, and Android mobile devices. Locally or in the cloud, you can test popular browsers or a headless browser. WebTestIt also handles the time-consuming setup process, such as scaffolding the test framework or automatically downloading drivers required to test the app on different browsers. WebTestIt also includes built-in best practices, such as creating page objects, separating test code from the testing framework, creating modular and reusable tests, cross-browser testing, and more. The result is more manageable and stable tests. Click here and visit the official documentation to learn more about WebTestIt. What Premium Features does WebTestIt Offer? Users can run the entire test suite or just the failed test cases. They can also run tests on a single endpoint or multiple endpoints in parallel and run tests from the command line with custom configurations. This makes execution more adaptable. Additionally, users can use WebTestIt’s CLI to integrate automated tests into CI servers such as VSTS, Jenkins, TravisCI, and others for continuous integration. You can also include generated reports as artifacts in your continuous integration process. Furthermore, WebTestIt’s browser support allows you to test locally on popular desktop and Android mobile browsers, as well as a headless browser. Distributing tests on a Selenium Grid or to cloud-based […]

Developers often find creating React apps difficult due to a vast array of build tools along with a ton of configuration files and dependencies. React is a JavaScript library established by Facebook that is frequently referred to as a frontend JavaScript framework. In addition to this, it is a tool for creating user interface components. It is fascinating because instead of directly altering the browser’s DOM, React constructs a virtual DOM in memory and performs all necessary manipulations there before modifying the browser DOM. However, one disadvantage of working with React is that it lacks pre-built components. As a result, React developers must either create these components from scratch or rely on the community. One of the hassle-free ways to deal with the issues underlying React is to use Facebook’s command-line tool: create React app. But if you are in the search of a perfect solution to all of React’s problems, you are in the right place. Sencha’s GRUI is a revolutionary tool that features high performance bundled with 100+ data grid features that ensure faster creation of data-intensive web applications. Whether you are a complete newbie or a seasoned developer, GRUI by Sencha is going to be the only tool you’ll ever need to succeed in creating React apps. Read on to find out more about create React app, GRUI by Sencha, and what makes it the ideal companion for React developers. What is Create React App? Setting up build tools like Babel and Webpack is required while creating a React application. Because React’s JSX syntax is a language that the browser doesn’t comprehend, certain build tools are necessary. That’s where create React app comes in, it helps you create applications that are compliant and supported by React framework. The beauty of this tool lies in the fact that it allows you to focus all of your energy on building apps rather than on building configurations. This results in increased productivity and saves developers from needless hassle. How to Get Started with Building Your GRUI App? Building apps on GRUI by Sencha is a breeze. There is no need for additional plugins and Sencha’s GRUI integrates seamlessly within your existing framework. This process can be easily categorized into 5 small steps. npx create-react-app –template minimal my-app Run cd my-app Run npm add @sencha/sencha-grid Building your own component by loading up the pre-generated app component and replacing its app source with: import React from “react”;import { SenchaGrid, Column } from “@sencha/sencha-grid”;import “@sencha/sencha-grid/dist/themes/grui.css”; export default class App extends React.Component {render() {const data = [{ col1: “value1”, col2: “data1”, col3: 1.01 },{ col1: “value2”, col2: “data2”, col3: 1.02 },{ col1: “value3”, col2: “data3”, col3: 1.03 },]; return ();}} Initiating the app by running: npm startSetting license by visiting GRUI and finally adding:SenchaGrid.setLicense(“”) How Convenient is It to Create a Column Editor in Sencha’s GRUI? Sencha’s GRUI is a high-performance react grid for react applications that makes it dead easy to create a column editor. In addition to this, it features extensive documentation which makes it a child’s play to diagnose and troubleshoot problems during installation or integration.  In order to create a column editor you have to type in the following React typescript: /*** 1. Define the imports*/import React, { Component } from “react”;import EditorProps from “../EditorProps”;import IEditor from “./IEditor”; /*** 2. […]

React is a popular open-source JavaScript library that allows you to build complex UIs using a component model. Those components are expressed using JSX, a React extension to JavaScript language syntax that helps structure component rendering using a familiar syntax. Fig. 1 Example Sencha grid using JSX Figure 1 is an example of a Sencha Grid for React being defined using JSX on the left.On the right, you see the rendered output of that JSX. It is a complex data grid that includes several columns, groupings, filtering, sorting, and various other features. Let us try and understand them in more detail. 1. What is Sencha’s Grid for React (GRUI)? What is new in the 1.1 release? In 2021, Sencha released version 1.0 of “Sencha Grid for React” (also called GRUI). It has all the power and capabilities of Sencha’s Ext Grid but has been rebuilt from the ground up. GRUI’s modernized code base is optimized for a very small footprint so that applications load quickly and seamlessly fit in with the rest of the npm React ecosystem; essentially, you install and get going. The idea was to make it as easy as possible to integrate Grid into your React applications. No other plugins or configuration were to be required. In the short amount of time since GRUI’s initial release, a lot of feedback has come in from our customers and early adopters. Hence, we released the second version of GRUI (version 1.1) with additional features. This release includes Tree Grid, a powerful grid capability that allows you to display hierarchical data. GRUI 1.1 can handle grouping, sorting, and filtering and has all the other Tree Grid capabilities that you have come to expect from the Ext version of the Sencha Grid. GRUI 1.1 also includes: locking grid, spreadsheet selection model, multi-level grouping, and several other filters and features. Additionally, an out-of-the-box Dark Theme is available with GRUI 1.1. 2. What is a typical React application with GRUI? Let’s learn more about GRUI by building a realistic React application. This simple example uses: Material UI, a very popular open-source component library for React FusionCharts, a commercial enterprise charting library GRUI, a commercial enterprise-grade data grid Fig.2 Example Sencha GRUI for REACT As shown in the above figure (Fig. 2), on the left-hand side we have the “VS” code, and on the right-hand side we have the sample application running in the browser. The stack used for building this application is: React 18 Material UI 5 FusionCharts and GRUI Grid 1.1 Fig. 3 – Example of FusionCharts integration to sample React Application Fig. 4 – Example of Tree Grid’s integration to sample React application 3. How can I recreate the sample? To briefly introduce the sample application, we created a simplified layout using Material UI with a tab panel. This includes: Big Data – a big-data grid from a Storybook example FusionCharts – example of a standard FusionCharts visualization Tree Grid + FusionCharts – Tree Grid integrated with FusionCharts and having them interact with each other Grid Flow Graph – a simpler grid with an interesting custom-column component that has a simple chart for each row Get access to an on-demand video for a step-by-step guide on how to create a complex React application here:SenchaCon 2022: Sencha’s Grid for Enterprise React Applications […]

Many people think application development is a huge task and that you have to spend a lot of money on the development of an application. However, the problem here is the inability of users to choose an ideal framework to support everything they need for the development. Using separate tools for each development task is what makes this process expensive. In this article, we will discuss how to save money on the development of an application regardless of its quality. Do you use pre-built UI components? Many JavaScript frameworks support component-based models. Unfortunately, the majority of them do not have any pre-built components. Therefore, JavaScript programmers have to either build components from the ground up or deal with components built by others. Sencha offers about 140 well-developed and tested UI components to speed up your development process. There, you can find all the necessary components to develop data-intensive online projects, including charts, exporters, grids, pivot grids, d3 adapters, and layouts. It saves money that needs to be spent on developers to build these components from scratch. Did you find an easy way to style the application? Styling the application is not an easy task for the developers. The reason is that they need to spend a considerable amount of time on manual coding to get the required format or style for the application. Apart from that, you will have to recruit separate designers to meet your requirements, which can be expensive. Sencha Themer provides you the ability to customize Ext JS, ExtAngular, as well as ExtReact applications and make them appear perfect. You can make your own themes with graphical tools rather than writing code. It’s simple to apply multiple color combos to different component states using the revolutionary color palette of Themer. The color palette depicts the base, text background, and font color with successively brighter and darker colors. Do you use the drag and drop option when it’s suitable? The drag and drop feature is one of the most powerful features to make the tasks of developers easier. Essentially, a drag operation is a click gesture on some UI element while the mouse button is held down and the mouse is moved. A drop operation occurs when the mouse button is released after the drag operation. Drag and drop functionality drastically reduces the time it takes to construct apps. It is done by replacing repeated lines of code with ready-to-use building pieces, such as react or the Angular components library. A smart drag-and-drop interface substantially decreases the learning curve when it comes to learning new technology. That’s a good thing when considering the quantity of different digital tools that many corporate personnel utilizes regularly. Sencha supports ‘Drag and Drop,’ making development easier and less time-consuming. It will also result in money savings. Do you have enough resources to quickly learn the framework you use? Learning new frameworks is not the easiest task. For example, Open-source frameworks don’t have dedicated teams to provide comprehensive documentation or learning materials. Therefore you have to go through various tutorials written by others, and ask questions on StackOverflow or Reddit to get your problems solved. When you use a product like sencha, they have very detailed documentation with step-by-step guides on everything from installation to deployment. Thus, sencha significantly reduces the time to […]