Web evolves3


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Hi I’m Veronica and I’m here with Nicolas Gonzalez and we will be presenting the changes for web applications in the Evolution 2.Actually I have a confession to make, I was going to do this presentation myself but I have a characteristic, if you want me to believe something, you first have to convince. So I changed the presentation to put nicolas up to the challenge to convince me and in the process convince you. So how many people here use Ev2?How many have web applications with GeneXus? (if any) great this talk is for you.
  • VB: So Nicolas why should I start in EV2 or even more, why should I migrate my existing web apps to Ev2?NG: Well, Veronica, GeneXus has been working in 3 main areas which I don’t know if are areas of interest in your web applications.
  • NG: Those are: UserExeprience, Security and PerfomanceVB: Well Nicolas thatispresent in everyapp, so yougotmyattention
  • Vb: So what do we have in user experience?
  • NG: In user experience we have 3 main points to talk about: Standards, Improvements in Usability and Flexibility.VB: Ok.
  • NG: In regards to standards, a common problem for developers is differences between different browsers.VB: Yes, that always had been a problem and now with mobile devices which meant an increase in different browsers the problem only got bigger. Do we have a solution for that?
  • NG: Yes, and actuallythatwassolvedbythecommunity. Thereis no longer a questiononwhatstandard web applicationsshould be using. HTML5, CS3 and Java script isthedefactostandardforallmain browsers. And thegoodnewsisthatGeneXusEvolution 2, generates HTML5VB: Great, that in itselfis a goodreason.
  • NG: And as we talking about standards, why it is important to follow them? The advantages is that we get faster loading times, consistency between browsers and with HTML5 the search engines find text easier so your pages are more accesible. Now you get all these if your HTML5 application is a valid one.VB: So how do I know if my HTML5 is valid? NG: Well, there are some specifications that need to be followed.----------------------------------------------------------------Valid HTML according to W3CHTML 4.01 TransitionalHTML 4.01 StrictXHTML 4.01 TransitionalHTML 5CSS 3 The way to avoid those inconsistencies is adherence to standards. The World Wide Web Consortium (W3C) isaninternationalcommunitythatdevelops open specifications (de facto standards) to enhance the interoperability of Web-related products, so you can create websites that can be seen from any platform, browser and userThere are tools and servicestocheckif a page isvalid – accordingtothestandards – . Thisisimportantbecause a valid page willLoad faster(invalid page will take longer to render because the browser will need to implement some fault recovery (deductive work to find where the next valid content is and how the browser can continue rendering it) and this can introduce an overhead.)Loads more consistently in differentplatforms and browsersAllows a betteraccessfromsearchengines, thereforepromotes more (orbetter/more ‘on target’) traffictoyourpages
  • NG: To check if your HTML is valid you can use some tools on the web that are free to check if your HTML5 is valid and follows the standard. You just copy & paste the HTML, or enter the URL or upload it so the validation service can check it. As a result you get a report saying if your HTML is valid or not.VB: But, it is always valid right? GeneXus generates the HTML5 so it is going to adhere to the standard.NG: Well, it is not only up to GeneXus, there is some responsibility of the developer. The parts that GeneXus generates are going to be valid but the parts that the developer codes need also to be valid. Like in this example, the program is setting a color to a background cell instead of using classes.
  • NG: And we have the same thing exists for the css file. And once you validate it, you can publish in your page these icons that indicate that you have been validated.VB: Cool
  • VB: So what we have for usability?
  • NG: Withtheadoption of HML5 you can addsomesemanticstothe web applications. Basically a lot of thethingswesaw more mobile can alsohappen in the web.You can use controlsthatbyitssemanticitimplies a certainautomaticbehavior.
  • NG: Let me give you an example, if you sayan attribute ss a color, the browser will display a color picker automatically.VB: That’s great as it was a lot of work to do it before.
  • Ng: Veronica, I have a question for you, how did you used to give information to the user of a web application about what type of information they have to enter?VB: Well, I either use tooltips or I had to add to GeneXusjavascript code to obtain the result that you are showing in this ppt. NG: You don’t have to write java script code or use tooltips anymore. Ev2 added placeholders that are supported in native HTML5.
  • NG: Veronica, I’m sure you used themes in your web applications. For what did you use them?VB: Well Nicolas, themes allows us to define in the css the way fonts and colors will be displayed in my app.NG: Yes, but does themes allow you to make this control rounded for example, or with a more interesting font?VB: No, for that I need to ask web designers for images…NG: Not anymore. Now with CSS3 themes has a lot more power and that power is available in Ev2.Let me give you some examples.
  • NG: We can define shadows as part of the theme thanks to property “box-shadow” and round the corners
  • NG: And thankstotheproperty@font-face in CSS3 we can easily use web fonts in a waythatis flexible and scalable
  • VB: So far so good Daniel. Tell me what we have in Flexbility
  • NG: We have a lot more flexibility when it comes to controlling how errors or messages will display. We can control de execution and we can control how it displays.For example today this is how it looks andSo this is the way we use to have it before
  • VB: Ok, so what is that?NG: This is a great feature. Before Ev2 you could change classes on runtime but you could not change the entire theme on runtime. Now you can and it is as simple as how it is shown there.VB: Great! I can think about a lot of ways to use this. Many times I have had clients asking me how to customize on runtime the look and feel of a website. How they could allow the user to pick the theme from a portafolio and apply it on runtime. I always try to find ways by changing the css but it couldn’t happen for multiple users so I have to endup doing it through database. This will solve completelly that problem. Also it will solve my problem of having the XPM font size too small for my eyes. I will ask Lali to apply this right away!.
  • VB: So what do wehave in security?======En Area de desarrollo web el foco dentro del a Evolution 2, se posiciono en tres elementos principalesExperiencia de UsuarioSeguridadDesempeño
  • VB: Security is something that keeps changing, and right now as you know we develop Core funcitonality we use in every application, however we always have to keep updating it if we have different authentication mechanisms, integration with tweeter, facebook, etc. Do you have somehting for me in this area?
  • DC: Yes, we have the GAM. GAM provides services for:AuthenticationProcess that needs to happen to allow access to system resourcesVerify that the users are “who” they say they areAuthorityOnce the system knows “who” is in the system, it needs to know “what” they can doAnd it works For Web and Smart Devices
  • VB: I assumeisprettyeasyto use right?DC: Yes, justsetting up a property per objector per application.------Notas de relleno:When GAM isenabledthefollowingthingshappen in the KB:. All externalimportsthat are defined in the GAM API are importedintothe folder “gam_library”, also a folder “gam_examples” iscreated and populatedwith a set of sampleobjetsonhowto consume GAM servicesfrom web and mobileappsProperties “LoginObjectfor Web” and “Loginobjectfor SD” are set and theypointtothesamplesthatwereimported (forboth web and SD respectively)A secondarydatastorenamed GAM iscreated, whichinheritsitsconfigurationfromthe default data store.Whentheapplicationisrunforthefirst time afterenabling GAM, the DB iscreated and metadata isinitailized. Alsothebinariesfor GAM are deployed.=========Cuando se habilita el GAM pasan las siguientes cosas en la KB:Se importan los objetos externos que definen el API del GAM que quedan en la carpeta GAM_Library y una serie de objetos con ejemplos de cómo usar el API tanto para web como para Smart Devices que quedan en la carpeta GAM_ExamplesSe inicializan las propiedades “Loginobjectfor Web” y “Loginobjectfor SD” que quedan apuntando a los ejemplos de login que se importaron anteriormente para web y SD respectivamenteSe crea un datastore secundario de nombre GAM que hereda la configuración del datastore defaultCuando se hace el primer Run luego de habilitar el GAM se crea la BD del GAM y se inicializa la metadata del GAM. Además se hace el deploy de los binarios del API del GAM.
  • In regards to authentication, it resolves the scenario in which users are local, namely, user registration takes place in the GAM database and, therefore, when they identify themselves the control is done over the data stored by the GAM.In case you want to make the login process to check the credentials against a database that is not the one of the GAM, or with an user directory based on LDAP or Active Directory, then, you can configure it to make the authentication through the External Web Service. In this case, it is necessary to develop this Web Service considering certain in/out parameters, and this service is the one that will have the necessary logic to make the authentication and return to the GAM the information of the user that is trying to login and the error codes if they occur.Similarly, it is possible to enable the login to be done using the Facebook or Twitter account. For instance, in the case of Facebook the application we are developing is registered and Facebook gives us a pair of keys that we should configure in the GAM. To the final user, when it enters to the login screen we can offer the Facebook or Twitter buttons, which will redirect to the site that corresponds given that the password is never entered in our system, and after the user is logged in in one of the social networks, it gets redirected to our application. If the authentication process completes successfully, then access to the system is granted.All these types of authentication can be enabled simultaniously, which means that we will be offering the user all this options in the login screen at the same time.=====Para la autenticaciónnosresuelve el caso en donde los usuarios son locales , esdecir, el registro de usuarios se lleva en la base de datos del GAM y por lo tantocuando se identifican el control se hacesobre los datosalmacenadospor el GAMEn el caso de quererhacerque el proceso de login haga el chequeo contra una base de datosque no sea la del GAM o hasta con un directorio de usuariosbasados en LDAP o Active Directory entonces se lo puedeconfigurarparaque la autenticación se haga a través de un Web Service Externo. En estecasoesnecesariodesarrollarese Web Service respetandodeterminadainterfaz de parámetros de entrada y salida y esesteservicio el quétendrá la lógicaparahacer la autenticación y devolverle al GAM los datos del usuarioque se estálogueando y código de error quecorrespodan. En estecaso se configura en el GAM dondeestádichoservicio.De la misma forma se puedehabilitarque el login se haga contra la cuenta del usuario en Facebook y Twitter. Porejemplo en el caso de Facebook se registra la aplicaciónqueestemosdesarrollando y Facebook nos da un par de claves quedebemosconfigurar en el GAM. Para el usuario final cuandoentra a la pantalla de login podemosofrecer el botón con Facebook y/o Twitter y esto lo redireccionará al sitioquecorresponda dado que la contraseñanunca se ingresa en nuestrosistema, luego de logueado en alguna de estasredessocialesesredireccionado a nuestraaplicación y ahísiestuvotodobien con la autenticación se le da acceso al sistema.Todosestostipos de autenticación se puedenhabilitarsimultaneamente, esdecir, que al usuario en la pantalla de login le podemosofrecertodasestasopcionesparaidentificarse.
  • NG: Hehe, we wish. It is an ongoing problem but at least we are trying to move more and more the solution of that concern to GeneXus.With every version and in every upgrade, there are always improvements in the vulnerability. And they are also working on awareness publishing more and more information about it.
  • And last but not least… performance
  • In regardsto performance, wehave 3 factors:The performance of the ServerThe performance of the ClientThe performance of thechannelthatconnectsthetwoAt present, all DBMS have implemented some mechanism to solve this issue, using a feature known as data paging. Basically, paging consists of dividing the information resulting from a query into smaller, easier to read blocks, thus significantly reducing the amount of data sent from the server to the client.The optimization was made in all dbms except DB2 (for iSeries or UDB) and Informix, whether is not supported by the dbms, the optimization message won't be shown in the navigation.
  • Basically, theimprovements are relatedtotheinformationsenttothe server, instead of sendingeverything all overthechanneltothe server in the POST (appliestogrids and SDTs).Reduce usage of Javascriptbyusingthe HTML5 capabilities, and using CSS3 and webfontstomake use of dynamic web contentfaster.Caché managment has beenimproved in thisversion.
  • HTML loadsHTML5 reduces considerably the loading times on the client side.
  • GeneXus provides the Server paging feature from the client, both in the User Interface (through grids with paging) and Data Providers. However, in this version (GeneXus X ev2) the DBMS feature is leveraged to achieve more efficiency on the server side when generating Data Providers. The Data Providers’ syntax makes it possible to indicate if paging is to be applied to the results of a group by using the Count and Skip attributes. Therefore, in these cases paging is solved by the DBMS. That is to say, the sentence is generated so as to use the paging options provided by the DBMS. In this way, there is less information travelling from the server to the client.Exceptions:When one of the conditions used to navigate the Data Provider/Grid (Where conditions) is evaluated in the client, even if it has paging clauses, the paging optimization is not performed in the server. In this case, paging is solved in the client.Whenever a navigation group (For Each, Grid with Base Table, Formula, etc) references a function or method, GeneXus determines whether that function can be evaluated in the server by the DMBS handler. If it is resolved by the DMBS is better because the whole navigation could be evaluated on the server side, thus optimizing the access to them; instead of solved by program.faster
  • NG: So I havewalkyouthrougheverythingwehaveforthese3 mainareas. Sowhat do youthink?
  • I’m convinced now! What do you think?
  • Web evolves3

    1. 1. The Evolution2 of the Web Veronica Buitron vbuitron@genexususa.com Daniel Coellar dcoellar@genexususa.com #GenexusUSA
    2. 2. Why is it betterto develop web applications with GeneXus Evolution 2?
    3. 3. Topic 1 UserExperience Security Performance Web Evolution
    4. 4. UserExperience
    5. 5. User Experience Standards Usability Flexibility
    6. 6. User Experience Standards Usability Flexibility
    7. 7. Standards
    8. 8. Standards
    9. 9. Standards Faster Valid Accessible Consistent
    10. 10. Standards http://validator.w3.org/ Validate HTML Successfully checked With Errors
    11. 11. Standards Validation for CSS
    12. 12. User Experience Standards Usability Flexibility
    13. 13. Usability
    14. 14. Usability: Semantic DomainsColor Phone Geolocation Email @ Address
    15. 15. Usability: Color
    16. 16. Usability: Email
    17. 17. Usability: Phone
    18. 18. Usability: Geolocation
    19. 19. Usability: Phone
    20. 20. Usability: PlaceHolder <input type="text" name=“Search" placeholder=“keywords">
    21. 21. Usability: PlaceHolder
    22. 22. Usability: Themes
    23. 23. Usability: Themes
    24. 24. Usability: Themes
    25. 25. Usability: Themes
    26. 26. Usability: Themes
    27. 27. Usability: Themes
    28. 28. Usability: Web Fonts
    29. 29. Usability: Web Fonts
    30. 30. Usability: Web Fonts
    31. 31. User Experience Standards Usability Flexibility
    32. 32. Client Side validation
    33. 33. Client Side validation
    34. 34. Flexibility
    35. 35. Security
    36. 36. Security Application Security
    37. 37. GAM: GeneXus Access Manager Authentication Authority Web and Smart Device
    38. 38. GAM: How to enable?
    39. 39. GAM: Authentication Types Local External Web Service Twitter Facebook
    40. 40. Vulnerability Protection
    41. 41. Secure ApplicationsPlatform • Improvements in every version • Improvements in every upgrade
    42. 42. What are we doing? Tools to scan for vulnerabilities Constant GAM Improvement Secure Apps
    43. 43. Performance
    44. 44. Performance: Network Minimize Traffic HTML5, CSS3, Web-Fonts Improved cache management
    45. 45. Performance: Client Side Better Loading Times
    46. 46. Performance: Server Side DB paging in the server: grids & data providers
    47. 47. Userexperience Security Performance Web Evolution
    48. 48. GeneXus Evolution 2• Evolution 2 NOW! is the better choice to develop web applications
    49. 49. Thank you Veronica Buitronvbuitron@genexususa.com Daniel Coellardcoellar@genexususa.com #GenexusUSA