SenchaDay 2022 React Grid GRUI presentation with Marc Gusmano (Sencha)
Kegan Blumenthal, General ManagerVirtual SenchaCon KeynoteApril 12, 2022Sencha's React Grid GRUIMarc Gusmano – [email protected]
View Slide
© 2022 Sencha Inc. #SenchaCon22Sencha Day 2022Welcome and KeynoteMarc GusmanoSencha Product Architect9 amFrontend Architecture withMicro FrontendsThorsten Suckow-Hombergeyeworkers GmbH10 amAn Early Preview ofSencha Rapid ExtJSMarc GusmanoSencha Product Architect11:15 amUser Experience -Good Code is not the only thingTosten Kocheyeworkers GmbH1 pmSencha’s React GridGRUIMarc GusmanoSencha Product Architect1:45 pmCustomer Success Story:Reflex Solutions ProChristoph Brand (mysystems GmbH)Simon Buckel (eyeworkers GmbH)2:45 pmNPM in Sencha Projects &Build PipelineThorsten Suckow-Hombergeyeworkers GmbH3:30 pmModel Schemer:What does it do and what alternatives are there?Thorsten DinkhellerSencha ExtJS MVP4:15 pmUpcoming Sencha Day PresentationsAll times inUHR
© 2022 Sencha Inc. #SenchaCon22Safe Harbor StatementThese plans and roadmap represent our intentions as of this date, but ourdevelopment plans and priorities are subject to change. Accordingly, we can’toffer any commitments or other forms of assurance that we’ll ultimately releaseany 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 ourcustomers’ rights to upgrades, updates, enhancements and other maintenancereleases will be set forth only in the applicable software license agreement.
© 2022 Sencha Inc. #SenchaCon22AbstractAn Introduction to GRUI - Sencha's Data Grid for ReactThis session will explore Sencha's Grid for React - GRUI, which stands for “Grid for ReactUser Interface”.This grid, built 100% in React, is based on the popular Ext JS Grid. With GRUI, all of thefunctionality and performance benefits found in the Ext JS grid are now available in a purereact component.Come see a demonstration of GRUI, showing its ease of installation, features, and functionalcapabilities.
© 2022 Sencha Inc. #SenchaCon22Agenda• What is Sencha GRUI?• Why Sencha GRUI?• Getting Started• Getting Started – Demo• How to get it?• Features• The GRUI Team• Roadmap
© 2022 Sencha Inc. #SenchaCon22What 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
© 2022 Sencha Inc. #SenchaCon22Why Sencha GRUI?Sencha Grid – Industry Leader• Performance | Loading, Editing, Scrolling• Scalability | To millions of Data Sets• Feature-rich | Filter, Sort, Hide/Show columns, Pagination, Infinitescrolling, Localization• Ease of use | Install, Modify, Customize
© 2022 Sencha Inc. #SenchaCon22Getting 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
© 2022 Sencha Inc. #SenchaCon22Email from Trialhttps://s608.t.en25.com/e/es?s=608&e=5785117&elqTrackId=7bd6885c5b3a475495fc29855c441119&elq=940ec35067ac4c00824a6b1498ca4675&elqaid=41177&elqat=1
© 2022 Sencha Inc. #SenchaCon22Documentation
© 2022 Sencha Inc. #SenchaCon22Getting 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
© 2022 Sencha Inc. #SenchaCon22JSX Example
© 2022 Sencha Inc. #SenchaCon22Features
© 2022 Sencha Inc. #SenchaCon22Custom Renderers• Provide a custom render function to any column to modify therendering• Build your own custom column types using JSX
© 2022 Sencha Inc. #SenchaCon22Column Editors• Each column type has its own editor• But just like columns you can create your own custom editors usingReact components.
© 2022 Sencha Inc. #SenchaCon22TypeScript• TypeScript types provided out of the box• IDE IntelliSense• Examples in both TypeScript and standard JavaScript
© 2022 Sencha Inc. #SenchaCon22Custom Data Loading
© 2022 Sencha Inc. #SenchaCon22Column Types• • • • • • • • • • • • • • With More to come….
© 2022 Sencha Inc. #SenchaCon22Virtual Columns• Virtualized rendering isn’t just for Rows• Configure an unlimited number of columns and the Grid will renderonly the visible columns• Massive performance increase for applications that need largenumbers of columns
© 2022 Sencha Inc. #SenchaCon22Enterprise 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)
© 2022 Sencha Inc. #SenchaCon22The GRUI Team
© 2022 Sencha Inc. #SenchaCon22Celestial Core OfferingsEstablished Web/Mobile App Development CompanyFRONTEND BACKEND QA & TESTING DEVOPS CLOUDManaged ServicesManaged ServicesApp DevelopmentApp DevelopmentApp DevelopmentIntuitive UI/UXFrontendArchitectureResponsive &Cross PlatformDevelopmentBackend ArchitectureDatabase DesignAPI DevelopmentBug-free SoftwareFull-cycle SoftwareTestingQuality AssuranceAutomation TestingDevOps as a ServiceCI/CD &OrchestrationAssessment &Infrastructure DesignTool Stack PlanningCloud InfrastructureHosting & StorageCloud MigrationServicesDevSecOps• 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 & DevelopmentData Visualization/Executive DashboardsEnd-to-End AI/Big Data SaaS PlatformMobile Enterprise ApplicationsE-Commerce PlatformsTypical Celestial Systems Projects
© 2022 Sencha Inc. #SenchaCon22Roadmap• 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
© 2022 Sencha Inc. #SenchaCon22Q & A[email protected]
© 2022 Sencha Inc. #SenchaCon22Marc Gusmano[email protected]Sencha's React Grid GRUISencha Day 2022MunichNovember 8, 2022
eyeworkers
nishiuma
smt7174
nrryuya
yoshiitaka
grimoh
antimon2
hamadakoji
coe
line_developers
yuneco
shunsugai
mkwrd
trallard
mza
mthomps
lara
jeffersonlam
addyosmani
stephaniewalter
nonsquared
lauravandoore
carmenintech
zakiyama