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.
Create a Bot with Delphi and Telegram - ITDevCon 2016Marco Breveglieri
Bots are virtual assistants and they are able to send messages and notifications, live updates and news to any user and also answering commands and do tasks. With their simplicity and ease of use, they are gaining popularity among local administrations, private companies and other business activities. In this session you will see how to use bots and create a new one from scratch with Delphi leveraging the Telegram Bot platform APIs.
Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, PiacenzaMarco Breveglieri
Slide del seminario sull'uso di React con Delphi e confronto con altre tecnologie (es. ExtJS) per lo sviluppo Web, tenuto al Delphi Day 2016 a Piacenza.
I sorgenti sono disponibili qui:
https://github.com/marcobreveglieri/conferences/tree/master/2016/delphi_day_2016
Create a Bot with Delphi and Telegram - ITDevCon 2016Marco Breveglieri
Bots are virtual assistants and they are able to send messages and notifications, live updates and news to any user and also answering commands and do tasks. With their simplicity and ease of use, they are gaining popularity among local administrations, private companies and other business activities. In this session you will see how to use bots and create a new one from scratch with Delphi leveraging the Telegram Bot platform APIs.
Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, PiacenzaMarco Breveglieri
Slide del seminario sull'uso di React con Delphi e confronto con altre tecnologie (es. ExtJS) per lo sviluppo Web, tenuto al Delphi Day 2016 a Piacenza.
I sorgenti sono disponibili qui:
https://github.com/marcobreveglieri/conferences/tree/master/2016/delphi_day_2016
Skype é um dos meios mais utilizados no mundo para conectar pessoas, milhões de usuários utilizam esta ferramenta diariamente, assim sendo porque não integrar nossas aplicações ao Skype? Através do Skype API podemos efetuar chamadas, receber, encaminhar, criar vídeo conferência e muito mais, praticamente tudo está disponível através desta API. Nesta apresentação vamos aprender na prática como integrar nossas aplicações Delphi ao Skype e utilizar os componentes TMS Smooth Controls para criar interfaces ricas.
Telegram é um emergente sistema de mensagem instantânea, similar ao WhatsApp só que melhor. Aprenda como fazer sua aplicação web e cli se integrar com o Telegram para falar com a web e com celulares! Aprenda também a criar robôs que podem interagir com os usuários do Telegram de formas diversas, interagindo com outros serviços, mandando comandos para uma aplicação, disparando lembretes, criando jogos e muito mais.
Getting Started with React, When You’re an Angular DeveloperFabrit Global
If you’re an Angular developer looking into expanding your stack with React, this presentation will come in handy! It is an insightful introduction to React in comparison with Angular, where you will find all the basic knowledge you need to get started.
We’ll deep-dive into tech details such as:
● Virtual DOM
● JSX
● Functional vs Class-Based Components
● State
● How to Style
● Requests
● Upgrading: Redux and Flux and more!
You can also check out the full article version here: https://blog.fabritglobal.com/product-development/getting-started-with-react-angular-developer/
ReactJS - Re-rendering pages in the age of the mutable DOMMarc Cyr
A quick presentation about ReactJS and its benefits - with some discussion of the Flux pattern/architecture at the end.
Follow me:
https://twitter.com/marcacyr
https://github.com/marcacyr
JSF component libraries provide you with a solid basis for building enterprise UIs as they are covering most common use cases. But what can you do in a case that no existing component fits your project requirements?
There are many JavaScript component projects which offer together nearly infinite possibilities. But it might not be evident that leveraging these JavaScript frameworks is as easy as writing plain old HTML code, separating component and page development efforts. But how to wrap these components to fit into JSF eco-system?
That’s exactly where RichFaces CDK comes into play.
AngularJS 1.x - your first application (problems and solutions)Igor Talevski
We will talk about all aspects of building a single page application with AngularJS, and we will discuss real examples from day-to-day work. We will also cover a large amount of theory about general web development, best practices, and today's client demands. We will focus on three (3) main points: architecture, security, and real time notification.
Web Components with Jeff Tapper
Presented on September 18 2014 at
FITC's Web Unleashed Toronto 2014 Conference
More info at www.fitc.ca
OVERVIEW
Web Components provide a necessary element for large scale applications: the ability to build Web Apps as a set of encapsulated, maintainable and reusable components. In order to use Web Components, a series of emerging web platform features such as the Shadow DOM, HTML Imports and Custom elements, need to be used, each of which have varying support in browsers today. However, with the help of the Polymer project – a set of polyfills and an application framework using these principles – Web Components can be used today.
In this session Jeff Tapper will explore Web Components, and walk through creation of a Web Component for a modern JavaScript project.
OBJECTIVE
Learn to use Web Components to create reusable elements for your web application.
TARGET AUDIENCE
JavaScript Developers looking to understand how to build large scale applications.
ASSUMED AUDIENCE KNOWLEDGE
Audience should be comfortable working in JavaScript and manipulating the DOM
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What are Web Components
What is the current state of support for Web Components
When do I need to use the Polymer Project to implement Web Components
How to build a Web Component
How to use a Web Component
Introduction to web development🌐: HTML, CSS, and JavaScript
Problems with traditional approaches to web development 🤔
Introduction to ReactJS ⚛️: What is React, and why use it for modern web development?
Building a simple web application with React🧑🏻💻👩🏻💻
Delphi & Dintorni Webinar - Diventa un mago del TestingMarco Breveglieri
Il Testing è una pratica sempre più preziosa e fondamentale nell'ambito dello sviluppo del software: si tratta di un passaggio fondamentale per ridurre il numero dei bug nel software e abilitare automatismi come la Continuous Integration e la Continuous Delivery. Se utilizzati in modo errato però, i test possono causare più problemi di quanti ne prevengano: è importante quindi conoscere le differenze tra le varie tipologie di test, quali sono le loro caratteristiche ideali e padroneggiarli al meglio. In questo webinar faremo luce sul Testing, chiariremo bene i concetti di Unit e Integration Test, vedremo come scriverli nel modo corretto e quali tool ci vengono in aiuto... alla fine il Testing non avrà più segreti!
Delphi & Dintorni Webinar - Padroneggiare i principi SOLID con DelphiMarco Breveglieri
Molti sviluppatori continuano a porsi ancora oggi domande esistenziali, ad esempio "Come posso scrivere codice mantenibile?" oppure "Come posso rendere il codice testabile?". Purtroppo non ci sono keyword, né talismani che possano donare la qualità di essere "buono" al nostro codice senza sforzo, tuttavia è sufficiente rispettare pochi e sani principi di progettazione, detti principi SOLID. In questo webinar vedremo come soddisfare tali principi e scrivere "buon codice" con Delphi, rendendolo stabile, mantenibile, estensibile, comprensibile e scalabile, aprendo nel contempo la porta ad altri scenari visti talvolta con diffidenza, come il Testing, che diverranno così semplici e addirittura automatici.
Does The Delphi IDE Narrow You? Extend It! - ITDevConX European Delphi Confer...Marco Breveglieri
Delphi's integrated development environment (IDE) offers a very wide range of tools, commands and options ready to use. However, one day you may find that, of all these features, it happens to be the most dear to you that is missing; alternatively, you could start thinking of an 'automation' and think that if Delphi were able to do it, that would certainly save you a lot of time in your work, avoiding doing everything again and again many times, with the risk of making mistakes. If this range of situations seems very familiar to you but you don't know where to start, this talk is just for you! Thanks to the Open Tools API (OTA), Delphi allows us to interact with the IDE to add new commands, new tool windows, new wizards and project templates. Thanks to an in-depth explanation and several specially designed code examples, we will see together what it takes to extend the functionality of the IDE, to automate it and thus bring it closer to our own way of working.
Slide della sessione "Creare un Information Radiator in Delphi" per ITDevCon 2017. Si parla della creazione di un pannello informativo basato su Raspberry Pi 3 e Android, e programmato con Delphi e FireMonkey.
"Non Aprite Quella Unit!" ovvero "Scrivere Clean Code in DelphiMarco Breveglieri
Slide della sessione "Non Aprite Quella Unit" per ITDevCon 2017. Si parla degli errori comuni nella scrittura del codice e delle tecniche per creare codice pulito (Clean Code) in linguaggio Delphi.
In questo speech esploreremo le REST API più interessanti e curiose pubblicamente disponibili. Dopo una introduzione utile a fissare concetti di base e prerogative, vedremo come “consumarle” con Delphi costruendo accattivanti applicazioni client.
Applicazioni Web ultra-performanti con Vue.js e DelphiMarco Breveglieri
Vue.js è un framework per creare interfacce utente estremamente performanti e che può essere introdotto progressivamente nelle vostre applicazioni Web, nel modo meno invasivo possibile. In questo talk scoprirete come utilizzarlo con Delphi creando una soluzione frontend e backend ad elevate prestazioni.
Tra le varie tappe internazionali, il “RAD Studio XE2 World Tour” ha toccato anche l'Italia, precisamente Milano il 21 settembre e Roma il giorno successivo.
Le novità introdotte in questa versione del tool di sviluppo sono davvero tante, motivo per cui ho pensato di redigere questo reportage per
elencare quelle che – a livello personale e soggettivo – ritengo le innovazioni più interessanti e degne di nota, e magari sciogliere qualche dubbio a coloro che non hanno potuto partecipare, raccontando gli avvenimenti della giornata di presentazione.
Globus Connect Server Deep Dive - GlobusWorld 2024Globus
We explore the Globus Connect Server (GCS) architecture and experiment with advanced configuration options and use cases. This content is targeted at system administrators who are familiar with GCS and currently operate—or are planning to operate—broader deployments at their institution.
Unleash Unlimited Potential with One-Time Purchase
BoxLang is more than just a language; it's a community. By choosing a Visionary License, you're not just investing in your success, you're actively contributing to the ongoing development and support of BoxLang.
How Recreation Management Software Can Streamline Your Operations.pptxwottaspaceseo
Recreation management software streamlines operations by automating key tasks such as scheduling, registration, and payment processing, reducing manual workload and errors. It provides centralized management of facilities, classes, and events, ensuring efficient resource allocation and facility usage. The software offers user-friendly online portals for easy access to bookings and program information, enhancing customer experience. Real-time reporting and data analytics deliver insights into attendance and preferences, aiding in strategic decision-making. Additionally, effective communication tools keep participants and staff informed with timely updates. Overall, recreation management software enhances efficiency, improves service delivery, and boosts customer satisfaction.
Enhancing Research Orchestration Capabilities at ORNL.pdfGlobus
Cross-facility research orchestration comes with ever-changing constraints regarding the availability and suitability of various compute and data resources. In short, a flexible data and processing fabric is needed to enable the dynamic redirection of data and compute tasks throughout the lifecycle of an experiment. In this talk, we illustrate how we easily leveraged Globus services to instrument the ACE research testbed at the Oak Ridge Leadership Computing Facility with flexible data and task orchestration capabilities.
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...informapgpstrackings
Keep tabs on your field staff effortlessly with Informap Technology Centre LLC. Real-time tracking, task assignment, and smart features for efficient management. Request a live demo today!
For more details, visit us : https://informapuae.com/field-staff-tracking/
Strategies for Successful Data Migration Tools.pptxvarshanayak241
Data migration is a complex but essential task for organizations aiming to modernize their IT infrastructure and leverage new technologies. By understanding common challenges and implementing these strategies, businesses can achieve a successful migration with minimal disruption. Data Migration Tool like Ask On Data play a pivotal role in this journey, offering features that streamline the process, ensure data integrity, and maintain security. With the right approach and tools, organizations can turn the challenge of data migration into an opportunity for growth and innovation.
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Globus
The Earth System Grid Federation (ESGF) is a global network of data servers that archives and distributes the planet’s largest collection of Earth system model output for thousands of climate and environmental scientists worldwide. Many of these petabyte-scale data archives are located in proximity to large high-performance computing (HPC) or cloud computing resources, but the primary workflow for data users consists of transferring data, and applying computations on a different system. As a part of the ESGF 2.0 US project (funded by the United States Department of Energy Office of Science), we developed pre-defined data workflows, which can be run on-demand, capable of applying many data reduction and data analysis to the large ESGF data archives, transferring only the resultant analysis (ex. visualizations, smaller data files). In this talk, we will showcase a few of these workflows, highlighting how Globus Flows can be used for petabyte-scale climate analysis.
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Anthony Dahanne
Les Buildpacks existent depuis plus de 10 ans ! D’abord, ils étaient utilisés pour détecter et construire une application avant de la déployer sur certains PaaS. Ensuite, nous avons pu créer des images Docker (OCI) avec leur dernière génération, les Cloud Native Buildpacks (CNCF en incubation). Sont-ils une bonne alternative au Dockerfile ? Que sont les buildpacks Paketo ? Quelles communautés les soutiennent et comment ?
Venez le découvrir lors de cette session ignite
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisGlobus
JASMIN is the UK’s high-performance data analysis platform for environmental science, operated by STFC on behalf of the UK Natural Environment Research Council (NERC). In addition to its role in hosting the CEDA Archive (NERC’s long-term repository for climate, atmospheric science & Earth observation data in the UK), JASMIN provides a collaborative platform to a community of around 2,000 scientists in the UK and beyond, providing nearly 400 environmental science projects with working space, compute resources and tools to facilitate their work. High-performance data transfer into and out of JASMIN has always been a key feature, with many scientists bringing model outputs from supercomputers elsewhere in the UK, to analyse against observational or other model data in the CEDA Archive. A growing number of JASMIN users are now realising the benefits of using the Globus service to provide reliable and efficient data movement and other tasks in this and other contexts. Further use cases involve long-distance (intercontinental) transfers to and from JASMIN, and collecting results from a mobile atmospheric radar system, pushing data to JASMIN via a lightweight Globus deployment. We provide details of how Globus fits into our current infrastructure, our experience of the recent migration to GCSv5.4, and of our interest in developing use of the wider ecosystem of Globus services for the benefit of our user community.
Developing Distributed High-performance Computing Capabilities of an Open Sci...Globus
COVID-19 had an unprecedented impact on scientific collaboration. The pandemic and its broad response from the scientific community has forged new relationships among public health practitioners, mathematical modelers, and scientific computing specialists, while revealing critical gaps in exploiting advanced computing systems to support urgent decision making. Informed by our team’s work in applying high-performance computing in support of public health decision makers during the COVID-19 pandemic, we present how Globus technologies are enabling the development of an open science platform for robust epidemic analysis, with the goal of collaborative, secure, distributed, on-demand, and fast time-to-solution analyses to support public health.
We describe the deployment and use of Globus Compute for remote computation. This content is aimed at researchers who wish to compute on remote resources using a unified programming interface, as well as system administrators who will deploy and operate Globus Compute services on their research computing infrastructure.
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Shahin Sheidaei
Games are powerful teaching tools, fostering hands-on engagement and fun. But they require careful consideration to succeed. Join me to explore factors in running and selecting games, ensuring they serve as effective teaching tools. Learn to maintain focus on learning objectives while playing, and how to measure the ROI of gaming in education. Discover strategies for pitching gaming to leadership. This session offers insights, tips, and examples for coaches, team leads, and enterprise leaders seeking to teach from simple to complex concepts.
Designing for Privacy in Amazon Web ServicesKrzysztofKkol1
Data privacy is one of the most critical issues that businesses face. This presentation shares insights on the principles and best practices for ensuring the resilience and security of your workload.
Drawing on a real-life project from the HR industry, the various challenges will be demonstrated: data protection, self-healing, business continuity, security, and transparency of data processing. This systematized approach allowed to create a secure AWS cloud infrastructure that not only met strict compliance rules but also exceeded the client's expectations.
Quarkus Hidden and Forbidden ExtensionsMax Andersen
Quarkus has a vast extension ecosystem and is known for its subsonic and subatomic feature set. Some of these features are not as well known, and some extensions are less talked about, but that does not make them less interesting - quite the opposite.
Come join this talk to see some tips and tricks for using Quarkus and some of the lesser known features, extensions and development techniques.
Understanding Globus Data Transfers with NetSageGlobus
NetSage is an open privacy-aware network measurement, analysis, and visualization service designed to help end-users visualize and reason about large data transfers. NetSage traditionally has used a combination of passive measurements, including SNMP and flow data, as well as active measurements, mainly perfSONAR, to provide longitudinal network performance data visualization. It has been deployed by dozens of networks world wide, and is supported domestically by the Engagement and Performance Operations Center (EPOC), NSF #2328479. We have recently expanded the NetSage data sources to include logs for Globus data transfers, following the same privacy-preserving approach as for Flow data. Using the logs for the Texas Advanced Computing Center (TACC) as an example, this talk will walk through several different example use cases that NetSage can answer, including: Who is using Globus to share data with my institution, and what kind of performance are they able to achieve? How many transfers has Globus supported for us? Which sites are we sharing the most data with, and how is that changing over time? How is my site using Globus to move data internally, and what kind of performance do we see for those transfers? What percentage of data transfers at my institution used Globus, and how did the overall data transfer performance compare to the Globus users?
First Steps with Globus Compute Multi-User EndpointsGlobus
In this presentation we will share our experiences around getting started with the Globus Compute multi-user endpoint. Working with the Pharmacology group at the University of Auckland, we have previously written an application using Globus Compute that can offload computationally expensive steps in the researcher's workflows, which they wish to manage from their familiar Windows environments, onto the NeSI (New Zealand eScience Infrastructure) cluster. Some of the challenges we have encountered were that each researcher had to set up and manage their own single-user globus compute endpoint and that the workloads had varying resource requirements (CPUs, memory and wall time) between different runs. We hope that the multi-user endpoint will help to address these challenges and share an update on our progress here.
Listen to the keynote address and hear about the latest developments from Rachana Ananthakrishnan and Ian Foster who review the updates to the Globus Platform and Service, and the relevance of Globus to the scientific community as an automation platform to accelerate scientific discovery.
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
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
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. 😓
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>
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)
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
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
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 ...]
)
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! 👍
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