Up and running from concept to launch in just five days
On October 14, Atanas emailed Bruno with an idea for a TMS WEB Core-powered web app to run our internal partner Halloween costume contest. The goal was for a simple web page where team members could submit pictures of their Halloween costumes, and then everyone could vote on their favorites.
Oh, and we needed it ASAP so we would have time to use it.
The idea is simple, but as any experienced programmer can tell you, there are a lot of technical questions and requirements to satisfy:
- Can you take pictures from the web app or just upload them?
- Setting up the back end to store the data
- Communication from the front end to the back end
- Preventing spam votes
- An administrative interface for everything
Especially in web development, it is common to divide developers into two categories: front-end and back-end. The reason for this is that, most often, two completely different programming languages are required. The front end runs on JavaScript (with WebAssembly still gathering momentum), while the back end runs on various languages: PHP, C#, Java, Python, Perl, etc.
The running joke in software development is that the front end looks impressive, but the back end is scary. From a conceptual point of view, a front-end developer builds the part the user sees, making UI and design esthetics important. In contrast, the back-end developer-only creates the part that other developers see. Ideally, both parts are well designed, but now I’m off in the weeds and forgot the purpose of this blog post.
When you take all the software and tools used to build an application, that is referred to as the stack. The most common web stack is LAMP, an acronym that initially stood for Linux, Apache, MySQL, PHP, but this is incomplete as it assumes JavaScript is the only solution for the in-browser.
One of the reasons Node.js was so popular is that it allowed developers to use JavaScript on the back end as well as the front-end. This made the concept of a full-stack more popular: No longer would two different skill sets and programming languages be needed: Everyone can just use JavaScript everywhere!
Well, JavaScript isn’t the only full-stack programming language. In my mind, Delphi conceptualized full-stack development with its client-server architectures. Instead of using PHP or Java (both released the same year as Delphi) for the back end, and then something else for the front end, Delphi did everything in the same IDE with the same programming language.
In 1995 most web applications were just static HTML (Cascading Style Sheets didn’t even appear until 1996, and they took a while to catch on). And while JavaScript was born in 1995 along with Delphi, PHP, Java, and many other modern programming languages, it still hadn’t seen widespread adoption. Today, most web pages make heavy use of JavaScript. Sometimes there is more JavaScript code than the rest of the HTML, CSS, and images combined.
Okay, that was an interesting dive into stacks, front ends, back ends, and the history of web development, but what does all of that have to do with Halloween? Glad you asked—Delphi is still a fabulously productive full-stack development tool for web application development thanks to the power of TMS WEB Core front-end and TMS XData back end, and the RADoween web application is a great example.
In probably less time than it took me to write the above, the team of TMS Software involved with TMS WEB Core and TMS XData, i.e. Bruno Fierens, Wagner Landgraf and Bradley Velghe had a proof of concept allowing users to upload a picture, use the device camera, fill out their details, view the list of previous submissions, share a submission, vote, and sort…
Screenshot of the submission list in the proof of concept app. Voting via a click on the pumpkin was already in the prototype.
This may look simple, but the beauty is in the hidden complexity. In just five working days, an idea for a web application was fully realized and deployed live, all with a single stack and no need to combine different programming languages or development teams.
Let’s take a look at the different parts of this Delphi-powered web stack.
Delphi IDE
This is the IDE and the language used to build both the web client application, i.e. front end and the back end, the REST API server. For this, these two products were installed in the Delphi IDE:
TMS WEB Core: component framework for the web client + Object Pascal to JavaScript compiler (transpiler) and an Object Pascal RTL for the browser. Visual components used are surprisingly simply: TWebCamera, a few TWebEdit and TWebComboBox components, the TWebContinuousScrollControl for showing the list of entries incrementally, the TWebShare component to have access to the device share sheet.
The look & feel of the RADoween app is mainly created via HTML5 and CSS3. TMS WEB Core offers a unique binding mechanism to connect the UI logic to a HTML template. You find everything about TMS WEB Core here: https://www.tmssoftware.com/site/tmswebcoreintro.asp
TMS XData: native Delphi code based REST API server. With TMS XData you can create robust, fast REST API endpoints easily and also document this for the front end developer via Swagger UI. TMS XData can optionally take advantage of the Aurelius ORM that makes the REST API server also abstract from the database. This means you can easily choose what database to couple the back end server to.
The TMS XData REST server was deployed on Amazon Web Services (AWS). You can find everything about TMS XData here: https://www.tmssoftware.com/site/tmsbizintro.asp
Want to learn more about how Delphi and TMS bring full-stack rapid application development to the web? Be sure to join Bruno for his session at DelphiCon: Thriller: A Delphi Web App in 5 Work Days on Tuesday, November 16, 2021, at 2 PM CST. Registration is free for DelphiCon, and you get access to all the other amazing sessions.
The full source code is available on GitHub and will be shared during the DelphiCon session. If you aren’t already using Delphi or TMS Software’s unique components, you can get a free trial right now and start bringing your ideas to the web faster.
Check out TMS Software’s blog post on the project which includes a video
