18. WEB | Modern web app
TEMAS
Single Page Application
Transitions between data are smooth
Server notifies the app in case of changes
Better performance due to less traffic
EXAMPLE:
“Introduction to GeneXus Evolution 3”
Presented By:
Veronica Buitron, CTO & Co-Owner, GeneXus USA
@twitterhandle
#GXSUMMIT
Hi, first I want to thank you for coming here to share with us the presentation of great version.
Like with everything that feels genius there is a great amount of work behind it and GeneXus Evolution 3 took 2 years of research and development, one year of beta testing, 500 companies, 1000 beta-testers and 25 countries.
As a result of this work ARTech have built a more flexible, more intelligent and more adaptable version for today’s software needs and the main areas this vesion focus on is Mobile, Web and Enterprise.
Mobile
After 4 years working in mobile, ARTech invested all that experience to push the boundaries of the generator to produce the results we wil talk about today.
Web
Web as a tecnology have greatly evolved, driven by the players that define tendencies and GeneXus Evolution 3 is incorporating that evolution to develop this modern type of applications.
Enterprise
With GeneXus, for web and mobile, us and our community have always developed mission critical enterprise applications and it with that objective in mind that ARTEch had focus in features to allow to manage KB with thousands of objects more effectively with a special focus on BPM, Testing, Security and Reporting.
So let’s start talking about offline
In GeneXus Evolution 2 we had the possibility of developing mobile applications. These applications required server connectivity to display data and thus we refer to them as “online applications”
However even if we are always connected we cannot rely in 100% connectivity so depending on the type of application we need the app to work regardless we have connectivity to the server or not.
So the challenge was to allow in an intelligent and simple way for application to work disconnected and them seamlessly be able to synchronize the data back tothe server when they have connection. These are the offline applications that you can build with Evolution 3. With this feature you can develop application that work connected, offline or occasionaly connected.
What it involves an offline app?
First is the ability to create a local database in the device and that the application stores the information on it so the application continues to work when there is no connection,
How?
Once an application or set of objects are set to be generated offline, GeneXus infers the minimal database that needs to be generated locally on the device so the application continues to work with no connectivity.
However at some point that information stored in the device needs to be merge or synchronize back into the bigger system.
That sounds like a complex problem to solve and it is. However GeneXus had been able to solve this in a transparent way.
GeneXus generates all the code necesary amd executes it automatically to synchronize the data back to the centralized database whenever the applications is back connected.
So basically this reads this way, internet off, app continue working as usual, user fulfills orders, obtain signatures, then when the app recovers internet the data will get synchronize to the server tables in a complete transparent wya, the user just keeps working. Genius. And all this complexity the developers of the synchronization, detecting recovery of the connectivy etc is also completelly transparent to the developers. Double genius.
And all this by simply setting a property that will set off the generation of this architecture with other additional properties that will rule in which moment and how the syncrhonization wil take place.
JP will talk in more detail about offline applciations and Greg Lloyd will present a real use case of an offline application.
Now it’s time to talk UX.
Today the users expectation of the applications are high, pretty will just not cut it. It needs to be pretty, intuitive and functional.
And intuitive means follow the behavior the user is used to do in their device which of course changes by devices. So applications need to follow device standards and guidelines.
This applies to all apps being b2c, b2b apps or intra-company apps.
maybe because as we have such a small screen placement is very important, maybe because you tend to use the app in short period of times and you compete with multiple other apps and users with little patience for ugly, Maybe because Iphone was the first device that made popular mobile apps and Apple was always a design company, maybe because of all these different factors but one thing is for sure UX matters a great deal.
And it is for this that ARTEch had put a lot of focus on providing flexibility and features so you can design a great UX for your applications.
So I want to give you a quick taste of some of the things we built with Ev 3.
I mention that apps have to provide great functionality wrapped around an engaging factor like this cute Beagle that fetches tickets for you for sporting events, theaters etc. Ticket Beagle is a consumer application developed by Genexus USA with Evolution 3 that according to the press is changing the way you purchase tickets. Part Stub Hub and part Craiglist Ticket Beagles allows you to search for tickets, request tickets and sell tickets providing the network for buyer and seller to communicate easily and free of charge.
On top of that sponsors of the app provides discounts and you get to enjoy a cute beagle!
If you want tickets, download the app from AppStore or Google Play and support an app developed by GeneXus. (This was the product placement moment of the event ).
And like Ticket Beagles, there are a multiple applications you can do to solve every problem like this B2C app to schedule appointments for a hair saloon, or schedule services for dealerships, event applications with floor maps, or this b2c app that provides information about construction projects around chicago, or this non-profit holiday app for YWCA to support the holiday shopping experience and in a fun way remind users that they is always a time to do good donating to the Y, infrastructure applications like TUMF that provides information on hundreds of infra-structure development sites to stay connected, to locate them in a map or a logistics application like the experience that will be presented today by delivermenow. The applications are endless and the UX very different and you can develop all these user experiences with GeneXus Evolution 3.
Later in the day Franklin will share with all of us great tips to take into account when developing mobile apps and JP will show some examples of the things that can be done with GeneXus Evolution 3.
Throughout the years ARTech had kept the promise of keeping customers up todate in techology and it is following that promise that I’m announcing the newest app generator Windows 8, which is now in beta. With this generator ARTech is completing the cycle of devices allowing GeneXus customers to develop applications in all devices. This generator will all our customers help will follow the natural beta process of maturity to be available for the general public.
But not only of mobile lives the tech, so now it is time to see what’s new in web
The same way that there are UX standards define for mobile there are also for web. These standards had been defined by the big players and now our users want web application that behave like gmail, facebook etc.
Basically we want to develop modern web applications. For that in evolution 3 ARTEch had added features to allow users to create web applications that follows the principles of modern web apps.
A modern web app is an app where all the interaction happens within a Single Page, which means the page contains as much of the information on how the screen should display and behave instead of the server sending all the screen information. The page is self-contained, what happens after the click is pretty much self-contained in the page. The page already knows how it should be displayed so only the information that changes is what is refreshed in the screen, in other words back to the windows experience with the sex appeal of web.
And that also means that we have very minimal refreshes on a screen and when we have, basically when our view changes we use transitions so the change from one view to another is smooth.
Also modern apps are real time apps which means they are alive and they update themselves without the need for user interation. For that we need the server being able to notify the screen when data changes.
All this means than in the architecture of a modern app more information about the screens are stored on the browsers and a lot less information travels to the server which this results in a better performance.
This is a broker application developed in Evoltuion 3 in UruguayI think it encapsulates a lot of the concepts around a modern web application so I wanted to share it with you.
In this quick video you will see how prices change. The data changes here without the user doing nothing. The server notify of the changes to the screen, this is what in GeneXus we will refer as notifications.
You will also see that components that navegate independently as this wall when we can scroll without refreshing the entire screen. You can see that components gets hidden so when the view changes that is done with some smooth effects or transitions.
Lali and sebastian will mention more about this features in their web presentation later.
Quisiera mostrarles este ejemplo de una página desarrollada con Evolution 3 para un cliente que es un corredor de bolsa.
Esta es la pantalla principal de la aplicación donde muestra los principales indices del mercado, cómo han ido evoluciando los precios.
En esta sección verán que la información varía y no es como resultado de que el usuario haya tomado alguna acción sino que el server notificó de esos cambios a la página. De modo similar a Gmail cuando nos avisa cuando llega un nuevo mail o Facebook una notificación. Eso es lo que llamamos “notifications”.
Ahora verán que cada componente tiene una navegación independiente.
Se ocultan componentes y toda la página se adapta al cambio. Incluso durante todos esos cambios se hace con efectos visuales de transiciones.
En definitiva una user experience muy sofistica que es lo que el usuario de las aplicaciones Web esperan.
Si bien muchas de estas cosas se podian hacer en versiones anteriores con UC, etc, en Ev3 todo es más sencillo, nativo y potente.
Following in the same subject of modern application Evolution 3 have included features to develop responsive web applications
A responsive application is an application which layout changes to adapt to different screen sizes. The User interface layer contain information to detect the width of the device that is consuming the app so it can know how to display information. For example in a desktop you might display information in multiple columns while in a smart device you will use only one column.
ARTech added fetures to GeneXus Evolution 3 so you can develop responsive web applications and making it simple for you to do this. For example let’s take a look at Light CRM which is a sample app that comes with GeneXus Evolution 3. This application has a simple dashboard with the option available to execute.
Now if you access the application from a desktop or a mobile device the same UI reacts differently adapting not only the size, alignment and distribution of information.
But also what information to show. For example, we have here a grid of companies where the name of the company and the actions are the minimal set of information I want to display at all times. However address, phone and logo are pieces of information that are secondary in importance and therefore I can drop for smaller screens. GeneXus achieves this behavior using CSS3/HTML5 and media queries using Bootstrap framework. However for us GeneXus developers it is as easy as indicating that different columns uses different classes and which ones are optional.
So your application will display like this in a screen this size
Or like this in an iphone
Or like this in a tablet.
Lali and Sebastian will dive more in detail in their web presentation
We have been talking about mobile and web applications however they all share a common element we build with GeneXus enterprise mission critical applications and therefore ARTEch continuosly work to add features for enterprise application. One of the aspects that ARTech worked on is security.
For that they trained a group of specialists in security that constantly work on this subject.
This is a subject that is in permanent evolution and to follow the evolution the GeneXus code follows the OWASP principles (Open Web Application Security project an organization dedicated to improve the securty in software).
In addition there is a new utility called Security Scanner that scans your KB to find areas in your code where you might be vulnerable. It is a GeneXus extension that you can download and it warns the user where it finds vulnerabilities in the code. Then the GeneXus developer will go an check if in fact it is a vulnerability and correct the code accordingly.
In the wiki you can find documentation about the cases the utility checks as well as the Top 10 risks published by OWASP and how to take care of them in GeneXus development.
If you have a special need or interest in this subject we are developing services to help you either evaluating your existing application or be sure that your new applications consider securty right from the begininng. A webinar will be annouce shortly to dive deeper into this subject.
In this same subject we have GAM which is the GeneXus access manager module that it is also constanly evolving adding features around security.
In this evolution GAM now has the possibility of SSO and implements OAUTH allowing to define an application as an identify provider and have multiple other applications authenticating again this one. OAUTH is the security mechanism used by google to login in all its different applications as well as many other vendors.
In order to implement OAUTH, GAM will be enabled for all applications using OAUTH and then you can configure which one will be the iprovider and which are all the applications that can authenticate against it.
For enterprise applications reporting is a critical element. We need to provide tools so the users of our applications can analyze the data to make intelligent decisions.
For that GXQuery 4.0 had been completelly redesigned as a reporting tool.
With GxQuery 4.0 users can develop their own queries using an user-friendly interface. The main characteristics of GXQuery are around usability – easy to use, power (allowing using to build queries using the GeneXus knowledge on how you the data is related)
It is complete integrated to Genexus and now with the complete redesign of its interface we hope is your tool of choice for reporting.
Also the queries can be executed in multiple devices and the queries can be saved as excel, xml and pdf.
We will follow with future webinars to present details around GxQuery.
A always present component in enterprise applications is the business process the application implements and for that we have gxflow
Our business process modeler that allows to create applications that easily execute a business process and now in evolution 3 gxflow can also be access from multiple devices.
Jeremy & Sebastian will present a real use case of a BPM application done with GeneXus.
GXTest the testing tool to test GeneXus applications had now add features to make testing automation easier than ever. In the newest version of GXTest it automatically generates scripts to test performance of applications and functional scripts therefore out of the box it will generate multiple testing scripts based on your KB that you can go and edit if you want.
And to close enterprise I want to mention SAP integration
For many years different GeneXus customers have integrated with SAP using different mechanisms such as web services, xml, files, etc however now ARTech had develop utilities for SAP integration that will come as part of GEneXus and have started a certified process of that integration.
This is a process 9 month process that was started at the beginning of the year and now having passed the final steps, it is in the final signature stage.
Very soon we will announce the formal certification.
So to summarize a lot of work have been done in mobile, web and enterprise.
You have all the tools to define your mobile strategy, to develop modern applications and to continue evolving your enterprise application.
4 years of mobile, 17 years of web, 25 years of enterprise applications working for you.
GeneXus evolution 3, now it is up to you to take action and create some logic.