Kendo UI workshop introduction - PUG Baltic Annual Conference 2017 - by Peter Judge - Progress software

2. © 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.2
Why Web?
Rich
Reach
GUI
WEB
Used to be…Today  Modern web applications just as rich
and responsive as a 2 gigabyte
application installed on your laptop.
 Zero install. Simplifies and fast tracks
deployment and maintenance.
 Single development platform for any
device and screen size.
 Conservative on server requests,
mostly disconnected from the server
making web applications extremely
scalable.
 “JavaScript is the most commonly
used programming language on Earth”
(stackoverflow and github)

3. © 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.3
Introduction to Web Technologies
 HTML – Content… skeleton
 CSS – Styling… beauty
 JavaScript – Processing… behavior
Hello World

4. © 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.4
Web Resources
 HTML Tutorial
https://www.w3schools.com/html/default.asp
 CSS Tutorial
https://www.w3schools.com/css/default.asp
 Javascript Tutorial
https://www.w3schools.com/js/default.asp
 Javascript the Definitive Guide
https://www.amazon.co.uk/JavaScript-Definitive-Guide-David-
Flanagan/dp/0596101996

5. © 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.5
Popular Web Frameworks and Libraries
 Google Angular – Structural framework for web applications
 Progress Kendo UI – Widget/Controls library
 Facebook React – Web framework competitor to Angular
 Twitter Bootstrap – Style framework for Responsive Web Designs
 jQuery – HTML DOM manipulation library

6. © 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.6
Source: http://www.markupbox.com/blog/top-5-javascript-frameworks/

7. © 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.7
Kendo UI Examples

8. Kendo UI Builder for OpenEdge
Templating engine for generating
modern and responsive web design
single page web applications using
Angular, Kendo UI and Bootstrap

9. © 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.9
Kendo UI Builder Overview
 Template based approach to building
applications
 Productivity tool for building web
applications quickly and consistently
 No code or low code development
environment
 Web applications Generated using
AngularJs, Kendo UI and Bootstrap
 Repository based. Future proofing your
application.

10. © 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.10
Data
Providers
Templates
Development Process
UI Meta-data
View / Page
Designer Build
UI based on
latest
technology
• UI generated with
Kendo UI and
Angular.js 1.6
• As technology
evolves, your
generated UI will
be updated too
Custom UI logic
• Add your custom UI
logic using simple
JavaScript

11. © 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.12
Customization
 Designer properties
 App logo
 Row and column templates
 Custom HTML sections
 JavaScript event handler functions
 CSS themes
 Modify existing components
 Modify existing views
 Build custom components
 Build custom views
 Custom app framework
TechnicalKnowledgeRequired
Point and
Click
HTML/CSS /JS Familiarity
AngularJS,
EJS templates

12. Progress Telerik AppBuilder
Mobile development platform for
building and deploying mobile apps to
the AppStore, Google Play and
Windows App Store

13. All roadmaps are for informational purposes only, and the
reader is hereby cautioned that actual product
development may vary significantly from roadmaps
These roadmaps may not be interpreted as any
commitment on behalf of Progress, and future
development, timing and release of any features or
functionality described in the roadmaps remains at our
sole discretion
Disclaimer

14. © 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.15
Roadmap
 Kendo UI Builder 1.2, 1.3 and 2.0 planned for Q2, Q4 and Q1 2018
respectively
 Charts and Pivot Grid components
 Lazy loading
 Angular 2.0 templates
 API for future proofing applications
 Electron shell for creating Mac, Linux and Windows desktop apps
 Users and roles management
 Localisation
 and more…

15. © 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.16
Resources
 Building web apps with Kendo UI Builder (free online course)
https://tinyurl.com/kuib-training
 Building and publishing Data Objects (free online course)
https://tinyurl.com/oedo-training
 Advanced Data Objects with server-side operations (free online course)
https://tinyurl.com/oedo-adv-training
 Kendo UI Builder documentation
https://tinyurl.com/kuib-docs
 Kendo UI Builder evaluation
https://www.progress.com/openedge/components/kendo-ui-builder
 Telerik AppBuilder documentation
http://docs.telerik.com/platform/appbuilder/

16. © 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.17