SenchaDay 2022 - React Grid GRUI

SenchaDay 2022 React Grid GRUI presentation with Marc Gusmano (Sencha)

Transcript

1. Kegan Blumenthal, General Manager Virtual SenchaCon Keynote April 12, 2022 Sencha's React Grid GRUI Marc Gusmano – marc.gusmano@sencha.com
2. © 2022 Sencha Inc. #SenchaCon22 Sencha Day 2022 Welcome and Keynote Marc Gusmano Sencha Product Architect 9 am Frontend Architecture with Micro Frontends Thorsten Suckow-Homberg eyeworkers GmbH 10 am An Early Preview of Sencha Rapid ExtJS Marc Gusmano Sencha Product Architect 11:15 am User Experience - Good Code is not the only thing Tosten Koch eyeworkers GmbH 1 pm Sencha’s React Grid GRUI Marc Gusmano Sencha Product Architect 1:45 pm Customer Success Story: Reflex Solutions Pro Christoph Brand (mysystems GmbH) Simon Buckel (eyeworkers GmbH) 2:45 pm NPM in Sencha Projects & Build Pipeline Thorsten Suckow-Homberg eyeworkers GmbH 3:30 pm Model Schemer: What does it do and what alternatives are there? Thorsten Dinkheller Sencha ExtJS MVP 4:15 pm Upcoming Sencha Day Presentations All times in UHR
3. © 2022 Sencha Inc. #SenchaCon22 Safe Harbor Statement These plans and roadmap represent our intentions as of this date, but our development plans and priorities are subject to change. Accordingly, we can’t offer any commitments or other forms of assurance that we’ll ultimately release any or all of the described products on the schedule or in the order described, or at all. These general indications of development schedules or “product roadmaps” should not be interpreted or construed as any form of a commitment, and our customers’ rights to upgrades, updates, enhancements and other maintenance releases will be set forth only in the applicable software license agreement.
4. © 2022 Sencha Inc. #SenchaCon22 Abstract An Introduction to GRUI - Sencha's Data Grid for React This session will explore Sencha's Grid for React - GRUI, which stands for “Grid for React User Interface”. This grid, built 100% in React, is based on the popular Ext JS Grid. With GRUI, all of the functionality and performance benefits found in the Ext JS grid are now available in a pure react component. Come see a demonstration of GRUI, showing its ease of installation, features, and functional capabilities.
5. © 2022 Sencha Inc. #SenchaCon22 Agenda • What is Sencha GRUI? • Why Sencha GRUI? • Getting Started • Getting Started – Demo • How to get it? • Features • The GRUI Team • Roadmap
6. © 2022 Sencha Inc. #SenchaCon22 What is Sencha GRUI? • All the power of Sencha Grid and the ease of React • Modernize the codebase to the latest JS standards • Very small footprint/payload • Seamlessly fits in with the npm ecosystem • Easy to integrate into your applications • No other plug-ins required
7. © 2022 Sencha Inc. #SenchaCon22 Why Sencha GRUI? Sencha Grid – Industry Leader • Performance | Loading, Editing, Scrolling • Scalability | To millions of Data Sets • Feature-rich | Filter, Sort, Hide/Show columns, Pagination, Infinite scrolling, Localization • Ease of use | Install, Modify, Customize
8. © 2022 Sencha Inc. #SenchaCon22 Getting Started • https://www.sencha.com/products/grui • Public npm: https://www.npmjs.com/package/@sencha/sencha-grid • 2 versions • React 16/17 • React 18 • Getting Started Guide: • https://sencha-grid-storybook-test.csi-infra.com/?path=/story/docs-getting-started--page • Demo: https://demo-grui.csi-infra.com/ • Blog: https://www.sencha.com/blog/enterprise-ready-react-data-grid-grui-by- sencha • Webinar: https://www.brighttalk.com/webcast/11505/536084?utm_source=IderaInc&utm_medium=brighttalk&utm_campaign=536084
9. © 2022 Sencha Inc. #SenchaCon22 Email from Trial https://s608.t.en25.com/e/es?s=608&e=5785117&elqTrackId=7bd6885c5b3a475495fc29855c441119&elq=940ec35067ac4c00824a6b1498ca4675&elqaid=41177&elqat= 1
10. © 2022 Sencha Inc. #SenchaCon22 Documentation
11. © 2022 Sencha Inc. #SenchaCon22 Getting Started - Demo • https://sencha-grid-storybook-test.csi-infra.com/?path=/story/docs-getting-started--page • npx create-react-app --template minimal my-app • cd my-app • npm add @sencha/sencha-grid
12. © 2022 Sencha Inc. #SenchaCon22 JSX Example
13. © 2022 Sencha Inc. #SenchaCon22 Features
14. © 2022 Sencha Inc. #SenchaCon22 Custom Renderers • Provide a custom render function to any column to modify the rendering • Build your own custom column types using JSX
15. © 2022 Sencha Inc. #SenchaCon22 Column Editors • Each column type has its own editor • But just like columns you can create your own custom editors using React components.
16. © 2022 Sencha Inc. #SenchaCon22 TypeScript • TypeScript types provided out of the box • IDE IntelliSense • Examples in both TypeScript and standard JavaScript
17. © 2022 Sencha Inc. #SenchaCon22 Custom Data Loading
18. © 2022 Sencha Inc. #SenchaCon22 Column Types • <Column> • <BooleanColumn> • <CheckboxColumn> • <IntegerColumn> • <NumberColumn> • <FloatColumn> • <DecimalColumn> • <MoneyColumn> • <PercentageColumn> • <DateColumn> • <ColorColumn> • <PhoneColumn> • <EmailColumn> • With More to come….
19. © 2022 Sencha Inc. #SenchaCon22 Virtual Columns • Virtualized rendering isn’t just for Rows • Configure an unlimited number of columns and the Grid will render only the visible columns • Massive performance increase for applications that need large numbers of columns
20. © 2022 Sencha Inc. #SenchaCon22 Enterprise Version Features • Multi-Column Filter • Multi-Column Sort • Remote Sorting • Remote Filtering • Tree Grid • Row Virtualization • Column filter • Column virtualization • Column menu • Row/cell selection - range handle • Row grouping • Row nesting • Clipboard (selecting grid’s text)
21. © 2022 Sencha Inc. #SenchaCon22 The GRUI Team
22. © 2022 Sencha Inc. #SenchaCon22 Celestial Core Offerings Established Web/Mobile App Development Company FRONTEND BACKEND QA & TESTING DEVOPS CLOUD Managed Services Managed Services App Development App Development App Development Intuitive UI/UX Frontend Architecture Responsive & Cross Platform Development Backend Architecture Database Design API Development Bug-free Software Full-cycle Software Testing Quality Assurance Automation Testing DevOps as a Service CI/CD & Orchestration Assessment & Infrastructure Design Tool Stack Planning Cloud Infrastructure Hosting & Storage Cloud Migration Services DevSecOps • Ext JS v3.x to v7.x Upgrades • Ext JS v4.x to v7.x Upgrades • Ext JS to React Migrations • React UI/UX Design & Development Data Visualization/Executive Dashboards End-to-End AI/Big Data SaaS Platform Mobile Enterprise Applications E-Commerce Platforms Typical Celestial Systems Projects
23. © 2022 Sencha Inc. #SenchaCon22 Roadmap • Theming • Current Theme is based on Ext JS Theme • Plan to migrate to support • Class based theming such as Tailwind CSS • CSS-in-JS with Emotion • Make it as simple as possible to Theme the way you want • Smaller Builds • Continue to modularize the grid so you only include the features you need • Complete the migration to modern JavaScript • Tree shaking for small automatic custom builds • New Features • Tree Grid • Locking Grid • Spreadsheet • More Column Types
24. © 2022 Sencha Inc. #SenchaCon22 Q & A marc.gusmano@sencha.com
25. © 2022 Sencha Inc. #SenchaCon22 Marc Gusmano marc.gusmano@sencha.com Sencha's React Grid GRUI Sencha Day 2022 Munich November 8, 2022