Morfiks Unique Approach to Web Development

Morfik brings a unique approach to web development as it continuously questions the traditional approaches, and challenges established paradigms. To understand Morfik, its differences, advantages and the way it works, it helps to have a clear image of how and where Morfik uses different technologies to build your application.

Understanding Morfik application technology

Morfik applications are generally composed of two parts: a server-side component and a browser-side component. These parts are based on very different technologies but are intrinsically linked and share a set of features that allow them to work together. All communication between the two parts of the application happens using web standards such as HTTP requests and SOAP for the invocation of web services.

A single programming language for all coding—Instead of requiring the developer to learn myriad programming and markup languages to develop a single application, Morfik allows the developer to write all code for both browser and server portions of the application in a single language.


SingleLanguage.png
One tool, single language


A choice of programming languages —Morfik believes that developers should have freedom to choose to work with a programming language syntax with which they are already familiar. Morfik strives to provide the closest implementation possible of several commonly used programming languages, within the bounds required by the underlying Morfik Framework. The languages currently supported are: C#, Object Pascal and Basic.

Integrated design and development—Other companies work to separate design and development, with a focus on corporations with stratified teams. Morfik focuses on the small and medium size teams advocated by modern agile development techniques, and brings design and development together in a unique approach to application development. The design-oriented features take away the need to write a lot of code for basic user interface design.


MorfikScreenshotVS_M3.png
Morfik Integrated Development Environment


A page and form-based interface design metaphor—Instead of using the traditional simplistic 'page' metaphor which is poorly suited to component-based, modular design, Morfik adopts a combined page and form-based metaphor. In Morfik, a Form can represent large sections or just a small portion of a page and it will be used to compose a larger page object. Page objects aggregate several different forms to compose the whole 'page' the end user will see in his browser.

True WYSIWYG design—Morfik's advanced visual Page and Form Designers offer what is by a large margin the most authentic What You See Is What You Get design environment in the industry.

Dependency awareness—The Morfik development environment is highly aware of the dependencies between different documents and objects within a project. This awareness allows Morfik to update references to reflect user-made changes and present warnings on when removing a document/module from the project might result in broken references.

A single tool for all web development needs—Morfik combines into the Form Designer just about all graphic effects that might be required to create a specific design. Morfik leaves to specialized tools such as Photoshop or Gimp only what might be described as artistic work. Images necessary for shadows, glows, borders, corners and gradients are done automatically when a project is compiled. Morfik also provides, out-of-the-box, a fully functional, freely deployable, relational database and the visual database design tools for creating tables and queries.

High performance server-side code—While providing visual development features and working to make the developer's job as easy as possible, Morfik also works to provide a high performance and scalable server architecture. Morfik produces native binary applications for its target platforms and the Morfik Framework and development environment promote the creation of totally stateless applications that can easily be deployed to a server farm for load balancing.

Browser side

The browser side of your application is the client portion of your system. It will be responsible for the application's interface and will communicate with the server side of the application to request processing and handle results that are sent back. This portion of the application resides entirely inside a page being rendered in a web browser. It is therefore limited in functionality to what is allowable within the confines of script execution within the browser. Although the restrictions are many, due to security concerns, a lot can still be accomplished within a modern browser. Developers from other backgrounds should be aware that everything happens asynchronously inside the browser.

The code you write, or which is generated by Morfik, on the browser side of your application—be it in Pascal, C# or Basic—will get compiled to JavaScript so it can run inside the browser. The compiler will also generate a combination of HTML, CSS and images for the browser side of the application. These are all part of the established W3C standards for web content and work with all browsers.

Note: You still need to be aware that some browsers do a worse job than others when rendering pages and that some of these aspects are beyond even Morfik's control. For example: Internet Explorer (all versions) does a remarkably bad job of rendering semi-transparent HTML elements. In some cases, you just have to refrain from using this kind of feature if you want your application to look good in Microsoft's browser.

Server side

The server side of your application is always a native binary for the platform of your choice. Morfik's decision to use native code in the server side of the application ensures that you will have a low footprint, high performance application.

In order to achieve compatibility with multiple platforms and still provide the best performance, Morfik makes use of the FreePascal compiler for the final phase of its compilation. First the code, in any of the three supported languages, is processed and a detailed map of its content is built. Morfik then generates what is called intermediate code in Object Pascal. This code is then compiled directly to the appropriate binaries for Windows or Linux.

The binaries can be either a stand-alone executable, which will work as a web server, or as a binary extension module for Microsoft's Internet Information Server or the Apache server.

Due to the fact that the final binaries are produced by a slightly modified version of the FreePascal compiler, it is possible to link external code that is compatible with that compiler into the server-side portion of a Morfik application. This could include code created specifically for FreePascal or libraries that were created for use with Delphi, but are also compatible with FreePascal.

Morfik applications are, by default, 100% stateless on the server side. What this means is that from the moment you create your application you are ready to deploy it in just about any situation—from your personal notebook to a server farm. You can take it with you on the go, or have it up and ready to service a large number of users.


Note: All Morfik code is stateless on the server side and the code that is created by the Morfik development environment directs or induces you to write any additional code in a way that retains that condition. It is possible for you, however, to write code that will deviate from this by creating code that is dependent on a server-side global variable. You should avoid declaring global or module level variables on the server side of the application to ensure that the application remains stateless with the scalability advantages that architecture offers.

Database

Morfik has at its core the idea that most useful web applications will make extensive use of databases. Database access and the display of database-stored information is very easy with Morfik and is part of its visual design philosophy. Through an industry standard ODBC connection, a Morfik application can connect to several different databases. Morfik also provides, 'out of the box', a fully functional relational database server. This server is an open source database called Firebird which can be freely distributed with your own applications.

Built-in database

In line with its view of the importance of databases, Morfik will, by default, create an empty database for any new project. The Morfik .MXD file is compatible with the database format of the supplied Firebird database server. This will be the project's main database and from within the Morfik development environment you will be able to create new tables and queries that access those tables.

Morfik provides a Table Designer and a Query Designer that can be used to create these objects. If you are fluent in SQL you can opt to create what is called a pass-through query by writing its SQL code directly. If you are creating a project that does not need to have its own database, you can specify this in the options dialog. In this case, the application will not attempt to connect to the Firebird database and you do not need to deploy it along with your binaries.

External databases

If you need to access a database which is not the default project database, then it is an external database. In Morfik parlance, any database which is not the default database is called an external database, even if it is another Firebird database.

External databases can be of two kinds: Firebird or ODBC. Through an ODBC connection you will able to access almost any kind of database including Microsoft's SQL Server or MySQL.

Note: In accessing a non-Firebird external application, your experience may vary according to the implementation of the ODBC driver you are using.

The following diagram is a simple reminder of which technologies are used in each section of a Morfik application.


server-browser-diagram.png
Server and browser technologies used in Morfik applications

Rapid Application Development

Morfik was designed from the ground up to bring Rapid Application Development (RAD) to web application development. As the name suggests, the focus is on building applications fast. This does not mean that you cannot or should not plan and carefully design the architecture of your application. It means, however, that you can design, code, test and make corrections and improvements faster. This will free up more of your time, which you could use for improving your application through user reviews, planning sessions, code review and the like.

It's all about productivity

Being able to do more in the same or even less time. Achieving better and more impressive results. Morfik is all about productivity and enabling people with software development skills to become productive in the world of web development. By taking care of the underlying nuts and bolts, Morfik frees the developer from having to fuss around with HTML and CSS files, giving you time to really think about the logic and architecture of the application.

As of version 2.0 Morfik offers a large number of visual effects that you can apply to visual elements while designing the interface for your application. These effects allow you to proceed with a design without having to wait for a specialist to provide the images you would otherwise need for effects such as rounded corners, shadows and gradients.

The availability of these effects and the speed with which you can change your design to test different combinations will allow you to achieve much better results, faster than ever before.

Morfik also allows you to choose from a variety of provided themes, or create your own, to give your application or website the appearance you want. Changing themes can result in significantly different looks as they encompass colors, fonts, and control styles. You can change all these aspects of the application with a single click.

Visual design

At the heart of a RAD approach to development—be it desktop, client/server or Web—lies a visual designer. This is where your interface takes shape and where you decide what happens when the user interacts with different elements.

If you choose to create a new web application project from the system menu (round button with a 'power' icon), you will get a skeleton application composed of a couple of pages and forms. This is the basic template Morfik has provided to get you started.


visual-design1_M3.png
Form Designer


One you have created a new project, double-click on the Index Form thumbnail in the Project View of the Morfik development environment and you will see what is essentially the startup page for your new project. You can view and select from a gallery of themes by clicking on the Design Tab at the top of the main window.


visual-design-theme_M3.png
Morfik Design Tab Theme Gallery


You will notice that the entire look of your application changes as you hover the mouse over different themes. Changing a theme allows you to change pretty much all aspects of your application's visual appearance almost instantaneously.

Note: You are not limited to the themes that are provided; you can also create a totally new theme or alter an existing one. Themes you create can be exported and imported into other installations of the Morfik development environment, in other computers.


Once you have selected a theme, click on the Run button (round green button with a 'play' symbol on it) to compile and run your application. Status information will be displayed in the Output Panel that appears on the bottom of the main window.

Once the application has finished compiling it will be run inside the Morfik Debug Browser. The Morfik Debug Browser is built on Mozilla Firefox technology and is tied into the Morfik development environment so as to allow you to more easily test and, if necessary, debug your application.


morfik-debug-browser_M3.png
Morfik Debug Browser


As can be seen in the screenshot, you can get a totally new application, customize its appearance in a couple of minutes and in a couple more have it up and running, without ever writing a line of code. Development doesn't get much more visual or more rapid than this.

An overview of Forms and Controls

Morfik projects are typically composed of several Forms brought together in Pages, through use of SubForm Controls. These are used to define the areas of a Page or Form where another Form will be inserted. This essentially means that when you design a Form you are creating a visual snippet which will be inserted into another Form or Page.

There are several reasons for this approach, but the most important one is that it makes the process of creating the interface to your website or web-based application easier to manage.

When you first create a blank Form you see something similar to that shown in the following figure. At the top there is a Header Band and at the bottom there is a Footer Band, while in between them you have the Detail Band.


new-form_M3.png
A new Morfik Form


Elements that are used on a Form to create the interface of a page or application are always Controls or Widgets. Controls are the basic elements; the building blocks for everything in Morfik. Widgets, on the other hand are normally built from several Controls.

Controls such as TextLabels, Containers, Rectangles and TextEdits can be placed on any of the Bands of a Form and arranged and configured so that your pages or the interface for your web-based application will look as you want.

The following screenshot shows the Index Form from the BookCollector sample application, which is provided with Morfik, at design time. The highlighted area indicates where a SubForm control is placed.


bc-index-subform_M3.png
Using SubForms in Morfik


You can also see in this figure how Controls are arranged on each of the three Bands of the Form. In this case they follow what is a very common pattern in websites which is to have the navigation options at the top in the Header Band. At the bottom you have the general kind of messages you normally see at the end of a page, as well as some design elements that complete the general design. These elements are in the Footer Band of the Form.


header-details-footer.png
Header, Details and Footer Bands in Morfik Forms


You can connect Forms to data sources, which can be tables or queries, so that you can create your design without actually having to place content into the design. This allows for the decoupling of data from design and, as you can compose a page with multiple different Forms, it becomes easy to have pages that show data from multiple distinct data sources.

A design tool for non-designers

Morfik wanted to extend the basic concept of visual development to reflect what you need in order to create great-looking web applications, so it added to its development environment several features and capabilities normally associated with graphic design. Applications used by graphic artists and designers and are notoriously complex for the uninitiated. Instead of following in the footsteps of applications such as Photoshop or CorelDraw, Morfik decided to seek inspiration in the sort of application that is used to create charts, diagrams and presentations. Instead of allowing the user to create any image, these applications offer customization of the graphic elements already available.


mapping-device-design_M3.png
The Main Form in Mapping-Device sample project, in Design View


In doing so, Morfik created a development environment powerful enough to allow a professional designer to create almost any design, but is also simple enough that people without design experience can master its use and create great-looking websites and interfaces for web-based applications.

Rapid prototyping

Due to the speed at which Morfik allows the creation of sophisticated interfaces for web-based applications, it can be used very effectively as a powerful prototyping tool. It is not uncommon for a developer to create, in a couple of days, a mockup of a much larger application.

This can be used as a valuable tool to validate a design with the end users before the actual work of creating the application begins. By the same token, Morfik can be a valuable tool for conducting Joint Application Design (JAD) sessions with end users. These sessions, advocated by some agile software development methodologies, can happen with live feedback on how certain design ideas will play out when applied to the real application.

Whether you are designing a website, a complex web-based application or simply prototyping a proposed application, Morfik makes visual design and graphic design foremost within the developer's user experience. As you master its use, Morfik will enable you create great looking, powerful applications in shorter time than you would think was possible.

Related Topics

Back to top