Download as PDF, PPTX
![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)
![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/75/Web-Development-with-Delphi-and-React-ITDevCon-2016-34-2048.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/75/Web-Development-with-Delphi-and-React-ITDevCon-2016-35-2048.jpg)
Uploaded byMarco Breveglieri
Web Development with Delphi and React - ITDevCon 2016
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.
In this document
Powered by AI
Overview of web development using Delphi and React by Marco Breveglieri, a software developer in Italy.
Suggestions for learning Delphi: the book 'Delphi Succinctly', the 'Delphi Podcast', and humorous insights from 'Component Tales'.
Discussion about the evolution of web applications, drawbacks of fat web server applications, and the need for modern approaches.
Emphasizing the use of standard web technologies in modern web applications and questioning their complexity.
The development of JavaScript, its ongoing evolution with new standards, and the introduction of TypeScript for easier programming.
Overview of new HTML5 APIs available and an introduction to the Document Object Model (DOM) in web development.
Introduction to jQuery, demonstrating its limitations for large applications and explaining the concept of Single Page Applications (SPAs).
Introduction to React, its development by Facebook, its core strengths, and its MVC representation as a component-based library.
Case study on Facebook’s use of React and comparison with other frameworks like jQuery and AngularJS.
Introduction to JSX syntax, component properties, and state management in React.
Critique of classical DOM constraints and introduction to the concept and benefits of React's Virtual DOM.
Explaining React elements and how to create new elements using the createElement() function.
Overview of key lifecycle methods in React components and guidance on integrating SPA elements with React.
Benefits of using Delphi for backend development, mentioning various libraries available for integration.
Open floor for questions and concluding remarks by the presenter.
More Related Content
Similar to Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016
- 1. Web Development with Delphiand React Sviluppo Web con Delphi e React
- 2.
- 3. About me Marco Breveglieri Softwareand Web Developer www.compilaquindiva.com Via De Gasperi 14 42019 Scandiano (RE) ITALY
- 4. You might findinteresting… 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 findinteresting… Delphi Podcast The first Italian podcast about Delphi. Listen here: 👉 http://www.delphipodcast.com and also take part in it!
- 6. You might findinteresting… Component Tales Find out what Delphi components do when you close the IDE... Smile (if you can) here: 👉 https://twitter.com/ComponentTales
- 7.
- 8. Not these kindof 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 difficultto grasp?
- 12.
- 13.
- 14.
- 15. Evolving Fast JavaScript languageis 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 ObjectModel) 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 somecode
- 19. JQuery JQuery is aJavaScript 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 somecode
- 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 youan 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.
- 24. What is React? Reactis 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)
- 25.
- 26. React Components •Encapsulated •Reusable •Composable •Easy todesign and write
- 27. React vs… JQuery • ImperativeProgramming • 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 somecode
- 29. JSX Syntax JSX letsyou 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 • Defineimmutable 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.
- 32. Limits of classicalDOM • 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 asingle "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 createnew elements, call the createElement() function. ReactElement createElement( string/ReactClass type, [object props], [children ...] )
- 36. Let's see somecode
- 37. Component Lifecycle Each componentcan 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 Youmust 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 somecode
- 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.
- 42.