Magic xpa

Angularsingle Page apps

Connecting the dots between

Angular single page appsand Magic xpa

Content
What is a Single Page Application?

»

2

What skillsets does your organization need in order to utilize Magic’s»

3

What are the Business advantages of Magic’s web application framework?

»

4

What are the technical advantages of Magic’s web application framework?

»

5

What are UI services and how do they fit into the framework?

»6

Why move to Magic’s web application framework - A summary.

»7web application framework?

1| Web application framework collateral.

©2021 Magic Software Enterprises Ltd.

What is a Single Page Application?

A single-page application (SPA) is a web application or website that interacts with the user bydynamically rewriting the current web page with new data from the web server, instead of thedefault method of the browser loading entire new pages. The goal is faster transitions that makethe website feel more like a native app.
In a SPA, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser witha single page load, or the appropriate resources are dynamically loaded and added to the page
as necessary, usually in response to user actions. The page does not reload at any point in theprocess, nor does it transfer control to another page, although the location hash or the HTML5
History API can be used to provide the perception and navigability of separate logical pages in theapplication.
(Wikipedia)

What Is Angular?
Angular is an open-source JavaScript framework developed andmaintained by Google that helps developers and designers build
dynamic web applications using simple HTML tags. The applications
can then be run on both desktop and mobile dev’ices.

Do Magic and Angular work together?
It’s as if Magic had been waiting all of these years for a technology like Angular to come aroundso that Magic can best show off its development paradigm.
By working with Magic to develop your Angular applications, you benefit from the best of bothworlds since the two have a full synergetic fit. You define the business logic in Magic, both forthe backend and for the frontend, and develop the presentation using the Angular code. Thissynergy simplifies coding in Angular using Magic’s technology and philosophy. It’s all about
making life easier for the developer.
Applications created with Magic’s web application framework will be pure Angular applications,meaning they will be deployed and managed exactly like any Angular application.

2| Web application framework collateral.

©2021 Magic Software Enterprises Ltd.

What skillsets does your organization needin order to make use of Magic’s
web application framework?

Magic xpa
It’s a quick learning curve, since the client isdesigned very much like the usual Magic xpa
Online and Rich Client programs. You develop
the same way you are familiar with and then use
a new task type within Magic called Web Client.

Angular and/or JavaScript
As a Magic developer, you only need toknow basic Angular. Once the Angular codeis generated from Magic, the Angular partis over. You only need to understand theconnectivity between Magic and Angular andhow Magic’s engine uses Angular’s template
syntax. Angular’s goal is to let you extend thevocabulary of HTML, which you can do bydefining your own tags. This ability to extend
the vocabulary is how Magic syncs with Angularand helps you build the extensible HTML tags
much more productively than the raw Angularimplementation.

Web Design
Once the Magic directives have been added
to the HTML code, you will have functioningscreens. Any external IDE can then be used todesign the screens. Anyone who knows HTMLand CSS will be able to design the screens.
About 90% of all the modifications needed will
be to the HTML and CSS. Only about 10% of
the work will be in Angular and/or JS.

3| Web application framework collateral.

©2021 Magic Software Enterprises Ltd.

What are the advantages of using Angular
as opposed to a Rich Client module,at the frontend?
Your apps are client-free since the deployed application is pure JS, HTML5, and CSS3. The apps
can be accessed directly without having to pre-install clients. The freedom of HTML design isunlimited, and you can outsource the design of the screens to web designers and web developers
in your organization.

What are the business advantages of
Magic’s web application framework?
Angular is an open-source JavaScript framework developed and maintained by Google that helps
developers and designers build dynamic web applications using simple HTML tags. The applications
can then be run on both desktop and mobile devices.

Application Development and DeliveryMagic’s everlasting advantages are relevant now, more than ever. Magic xpa’s development
paradigm offers a remarkably fast time to market while utilizing a small but high-quality team ofdevelopers. Maintenance of large-scale applications becomes easy and low priced.

Advanced Customization of Your UIs
The beauty of decoupling the UI and the logic, which Magic’s web application framework makes
possible, is the flexibility to split the effort and time invested, between the business logic and theUI/UX. The two parts are equally important and time consuming, but when you have such aneffective way of splitting the two you can achieve better results. The work can be done by thesame developer (assuming the developer has the required skills) or by two different developers.
For the UI/UX part, the developer does not require any Magic programming knowledge.

Ease of Maintenance
You can change your application logic from Magic and it will be reflected automatically in yourAngular-based apps. Thus, there is less effort to make changes to your application in future.

IP ValueThroughout the years Magic xpa has proven itself as a future proof platform, allowing theapplication owner to continue using their well-known and reliable IP, when moving between
Magic versions and between deployment architectures. This is extremely relevant when
considering a switch to the web application framework.

4| Web application framework collateral.

©2021 Magic Software Enterprises Ltd.

What are the technical advantages of
Magic’s web application framework?

State-of-the-Art Technology
Magic’s Web application framework uses state-of-the-art client-side technologies including
JavaScript, Angular, CSS3, HTML5, and TypeScript. You can create full-fledged business webbased applications that are heavy-duty, including data entry, transaction intensive, enabling you tointegrate your applications with everything out there.

Magic xpa’s Client-Side Architecture
All of the UI-related work, including the UI logic, is done by the browser (the client), which enables
you to create fast and dynamic web apps. In this architecture, the server only sends raw data andapplication logic to the client and the client generates the screen. The browser encompasses threelayers:

1

Angular coding, including HTML,CSS and TypeScript files. This isdifferent for each application.

2Angular API. This is generic andthe same for each application.

3

Engine. This is also generic.

Less Code; More Versatility
The Magic engine’s robust business logic paradigm can be leveraged to save a lot of code in Angularby setting up most of the behind-the-scenes logic for the dynamic display of the presentation ofthe UI. In practice, Magic xpa offers a wide range of control and form properties, which are very
simple to use and can save a lot of lines of coding in Angular - for example, validation, recompute,conditions, visible, enabled, tooltips, and more.
Expressions on any of the properties are very easy to use in Magic, which otherwise would takedozens of lines of codes to develop in Angular, especially when you are trying to achieve dynamic
behavior in your apps.

5| Web application framework collateral.

©2021 Magic Software Enterprises Ltd.

Can Magic’s web client applications bedeployed in the cloud?
The web client runs in a browser, so that anyone with internet access can run anapplication deployed by this framework. Keep in mind that the application running within
the browser is a 100% standard Angular application, with a Magic backend. Therefore,
all you need to do is to deploy the backend modules in the cloud, and your Angularapplication will be cloud-based.

Which browsers are supported when using the web application framework?
Your web applications will be platform agnostic. It will run on any modern browser and on any
device with zero footprint. You do not need to install anything.

Can a Client/Server or a Rich Client application
be migrated into this framework?
Both client/server and rich client apps can easily be migrated
to web client. The web client development methodology issimilar to the rich client methodology, therefore allowing aneven quicker migration path.

What are UI services and how do they fit into the framework?
UI services is a term that Magic introduced. The rational is that when you examine a web
application you can split it into a frontend and a backend, but this would be a technical split. We
split the application into application logic and presentation logic.
All application/business logic should be handled by the application developer (regardless of where it
is running – on the server or on the client) and presentation logic should be handled by the UI/UXdeveloper mainly implementing CSS.
Magic UI Services are all the services that the application developer needs to provide to the UIdeveloper to implement the UI/UX.
For example: invalid value in a control, the validity or invalidity will be determined by the application
logic developer but how the control will look when it is invalid will be implemented by the UI/UXdeveloper.

6| Web application framework collateral.

©2021 Magic Software Enterprises Ltd.

Can a Web Client application be deployed on
mobile clients?
Of course, since Magic Web Client in a pure Angular application can be deployed onany device, as Angular can be deployed on any device.

Why move to Magic’s web application framework? – A Summary
Category

Benefits

New UI/UX»

Web designer friendly: You can easily create new, intuitive andmodern screens for your apps and you don’t have to design thescreens yourselves. The previous versions of Magic required you
to design the screens. You can now let Web designers handle thispart of the application - freeing you up to do what you do best.

State of the»SPA-compliance: Magic’s web application framework isway ahead of the market. This way of programming will becommonplace in the future, in the next 2-5 years.

»You can migrate your Magic business logic, while keeping thelogic intact, from previous Magic task types, such as Online
and Rich Client, to the new Web Client task type.

»

You can use the business logic regardless if it is on the server or client.

»Zero footprint: You and the customer don’t need to install anything.

»»

The app will run on all devices.
Pure Angular application. Deploy and manage itlike any other Angular application

Skillset»

No additional Magic knowledge is needed. You alreadyknow what you need to know in Magic.

Cloudenabling»»Easy access for everyone from the cloud to a demo or a free trial.
Less deployment time. Just send a link and a password to thecustomers without having to set-up any environment.
Although an initial investment is required, it will
be more cost-effective in the long run.

art- SPABusinesslogic
portability

Browserbased
deployment»

Contact us for more information
7| Web application framework collateral.

©2021 Magic Software Enterprises Ltd.