Web Development with Delphi and React - ITDevCon 2016
2 likes5,725 views
This document provides an overview of modern web development with Delphi and React. It discusses how traditional "fat" web applications are no longer preferred and introduces key concepts in modern web development like JavaScript, HTML5 APIs, DOM, jQuery, single page applications, and React. It explains what React is and core React concepts like components, properties, state, virtual DOM, JSX syntax and lifecycle methods. It also discusses how Delphi can be used to build backend APIs that a React front-end can communicate with.
![React Elements
●ReactNode
represents a single "node" in VDOM
○ReactElement: represents a HTML element
○ReactText: represents a portion of text content
●ReactFragment
○ReactNode[ ]: is an array of ReactNodes.](https://image.slidesharecdn.com/slidesreact-161019221525/85/Web-Development-with-Delphi-and-React-ITDevCon-2016-34-320.jpg)
![React Elements
To create new elements, call the createElement() function.
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
)](https://image.slidesharecdn.com/slidesreact-161019221525/85/Web-Development-with-Delphi-and-React-ITDevCon-2016-35-320.jpg)
Web Development with Delphi and React - ITDevCon 2016
- 1. Web Development with Delphi and React Sviluppo Web con Delphi e React
- 2. Who am I?
- 3. About me Marco Breveglieri Software and Web Developer www.compilaquindiva.com Via De Gasperi 14 42019 Scandiano (RE) ITALY
- 4. You might find interesting… Delphi Succinctly Learn the fundamentals of Delphi to build a variety of solutions for many devices and platforms in about 100 pages. Find more here: 👉 http://bit.ly/delphi-succinctly
- 5. You might find interesting… Delphi Podcast The first Italian podcast about Delphi. Listen here: 👉 http://www.delphipodcast.com and also take part in it!
- 6. You might find interesting… Component Tales Find out what Delphi components do when you close the IDE... Smile (if you can) here: 👉 https://twitter.com/ComponentTales
- 8. Not these kind of app Web Server Fat Applications Based on • IntraWeb • ASP.NET Web Forms are no more a good idea now. 😉
- 9. Web Server "Fat" Applications Benefits • Hide the details of HTTP • Easy for developers with experience in desktop apps • Leverage RAD tools support • Are ideal for prototyping Disadvantages • Hide the details of HTTP • Page/View state could become very large • High bandwidth, memory and server CPU consumption • Lower scalability • Designer/Developer task separation is difficult • Hard to Unit Test
- 10. Modern Web Applications • Use standard Web technologies and languages
- 11. Are they difficult to grasp?
- 14. Today is…
- 15. Evolving Fast JavaScript language is living a "second youth". 👶 • It has extended support by browsers • New versions and standards are coming (ES6) • There are supersets that make programmer life easier (TypeScript)
- 16. HTML5 new APIs •Canvas / SVG •WebGL •File API •Indexed DB •Media API •Offline support •Web Sockets •Web Workers •Web Storage •Geo-location API •Fullscreen support
- 17. DOM (Document Object Model) DOM (Document Object Model) • It is an object model • It is a hierarchical tree of nodes • It represents the elements of a Web page • It offers objects and members to add, delete, create elements in your page
- 18. Let's see some code
- 19. JQuery JQuery is a JavaScript library that • Simplifies access to the DOM • Re-uses CSS syntax to select elements • Provides additional features • Manages the difference from browser to browser but it is not enough to develop a large scale application. 😓
- 20. Let's see some code
- 21. Single Page Applications (SPA) A Single Page Application (SPA) • Consists of only a single (HTML) page • Mimics the responsiveness of desktop apps • Makes the user experience more fluid • Does not reload the page in the browser but uses AJAX • User Interface is update dynamically in response to an action • Data and resource transfer is more efficient
- 22. To give you an idea… <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Single Page Application</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="container"> <!-- Qui viene generata l’applicazione --> </div> <script src="framework.js"></script> </body> </html>
- 23. Let's React
- 24. What is React? React is a JavaScript library to manage UI in Web Applications. • Built by Facebook • Used in Facebook and Instagram • Thinking in MVC, React represents the "V" • It is really fast (thanks to the Virtual DOM) • It is based on components (a concept very clear to Delphi developers)
- 26. React Components •Encapsulated •Reusable •Composable •Easy to design and write
- 27. React vs… JQuery • Imperative Programming • Need to assign IDs to elements • Event-Driven approach • Leads to "zuppa code" AngularJS (ver. 1) • Oscillating learning curve (but Angular is a full framework) • Separation of Responsibility (instead of Separation of Concerns) • Proliferation of directives and scopes
- 28. Let's see some code
- 29. JSX Syntax JSX lets you mix JavaScript code and HTML. • Makes it easy to write HTML templates • Saves you from calling React functions • Need to be "transpiled" (offline or live in the browser) • Manages the elements of Virtual DOM * (*) We will talk about that in a minute… 🕓
- 30. Component Properties/State Properties • Define immutable values inside the component • They are useful for initialization • You can read them with this.props in the code State • Define values that is subject to change • When state change, React updates the UI • You can read the state using this.state in the code
- 31. Inside React
- 32. Limits of classical DOM • It is a "black box" provided by the browser • You cannot change its code • You cannot optimize it and get better performances • You cannot specialize it for specific scenarios • It imposes an "imperative style" of coding • The code based on DOM is less mantainable • Sometimes it is a real bottleneck
- 33. React Virtual DOM • It is a virtual representation of the page in memory • It mirrors the real browser DOM • When the page must be updated • React compares the VDOM with the real DOM to determine the differences between the two • React apply changes to the underlying DOM based on these differences • Pages get updated in the fastest and most efficient way! ⚡⚡⚡
- 34. React Elements ●ReactNode represents a single "node" in VDOM ○ReactElement: represents a HTML element ○ReactText: represents a portion of text content ●ReactFragment ○ReactNode[ ]: is an array of ReactNodes.
- 35. React Elements To create new elements, call the createElement() function. ReactElement createElement( string/ReactClass type, [object props], [children ...] )
- 36. Let's see some code
- 37. Component Lifecycle Each component can implement a set of functions to manage the main moments of its lifetime. Most important functions are: render() getInitialState() componentWillMount() componentDidMount() componentWillUnmount()
- 38. Put Everything Together You must combine all the elements we have seen till now. • Create the main page of your SPA • Import libraries and stylesheets you need (including React!) • Create scripts for your components • Call the ReactDOM.render()function to render the UI Let's see more demos! 👍
- 39. Let's see some code
- 40. Wire-up a (Delphi) backend Delphi is a great tool for building backends! (soon also in Linux) • There are nice libraries you can use • DataSnap / EMS • Delphi MVC Framework • MARS Curiosity • Indy Components • Thanks to FireDAC, you can connect to any database you want • Can be invoked through AJAX from any client application (*) (*) Use the library/framework you prefer client-side for HTTP/REST communication
- 41. Questions? Don't be afraid of asking…
- 42. Thanks! 😇