QAFE stands for Quality Application Framework for Enterprises. It was developed by Java and Oracle engineers to modernize Oracle Forms, and at the same time to create a modern platform for new business application development. QAFE separated the business logic from the presentation layer. Therefore, as the web evolves, developers do not have to rewrite their applications: because the QAFE engine, with the help of GWT and other toolkits, renders their logic to any frontend. http://gwtcreate.com/#agenda-eu_room1_event10 http://www.qafe.com

1. How we built a million
dollar business with GWT
GWT.create 2013 Frankfurt
QAFE Inc.
Rokesh Jankie (rjankie@qafe.com)
Salar Abdefaily(sabdefaily@qafe.com)

2. Agenda
•
Introduction: Rokesh, Salar, QAFE
•
Tools and Demos
•
What we have learned
•
Considerations
•
The Future…

3. Who we are
QAFE Inc.
!
2008
QUALOGY
Est.1998
220 Consultants
Outsourcing,
Hosting, Training
Soft- / Hardware
Solutions
Application
Development
USA, S-America
& Netherlands

4. Who we are
QAFE Inc.
!
2008
QUALOGY
Est.1998
220 Consultants
Outsourcing,
Hosting, Training
Soft- / Hardware
Solutions
Application
Development
USA, S-America
& Netherlands

5. Who we are
QAFE Inc.
!
2008
QUALOGY
Est.1998
220 Consultants
Outsourcing,
Hosting, Training
Soft- / Hardware
Solutions
Application
Development
USA, S-America
& Netherlands

6. QAFE
•
Quality Application Framework for
Enterprises.
•
Created by Developers for Developers
•
Makes sure you focus on business and
not nitty-gritty of building applications

7. Our Mission
•
Bring legacy Oracle Forms to the Web
and be the best at it.
•
To tackle my frustration :)

8. Our Mission
•
Bring legacy Oracle Forms to the Web
and be the best at it.
•
To tackle my frustration :)

9. Why ? Horror of last decade

10. Why ? Horror of last decade

11. And of course…

12. And of course…

13. Hmmmm…
Q4 2010
Q4 2013

14. Hmmmm…
Q4 2010
Q4 2013

15. Hmmmm…
Q4 2010
Q4 2013

16. Hmmmm…
Q4 2010
Q4 2013

17. Hmmmm…
Q4 2010
Q4 2013

18. Hmmmm…
Q4 2010
Q4 2013

19. Hmmmm…
Q4 2010
Q4 2013

20. Hmmmm…
Q4 2010
History seems to repeat itself!
Q4 2013

21. QAFE Architecture
Front-end Technologies
QAFE
GWT
FLEX
HTML5
Mobile Others
Presentation Framework (QPF)
Business Framework(QBF)
Back-end Technologies
Java
WebService
Database
“Third Parties”

22. QAFE Architecture
How do we do that ?
Front-end Technologies
QAFE
GWT
FLEX
HTML5
Mobile Others
Presentation Framework (QPF)
Business Framework(QBF)
Back-end Technologies
Java
WebService
Database
QA QA
FE ML
La ’s M ,
ng ark
ua
up
ge
“Third Parties”

23. Inspiration

24. Inspiration

25. Why GWT
•
Early adopter
•
Lots of Java back then
•
Best solution so far
•
Alternative, ZK Framework, but wasn’t Google :)
Our first
GWT

26. Design considerations
•
Shorter compilation times (fast development cycle)
•
Any application with same size Javascript
•
Easy for any developer, accessible for newbies
•
Use the power of GWT under the hood
•
•
We like Single Page Applications (SPAs)
Use of Maven and other standards (web overlay)

27. Tooling
•
QAML Builder [Eclipse Plugin]
•
Graphical Editing UI
•
Flow Editing
•
Integration with native sources [DB,Java]
•
Maven based
•
Mobile and more…

28. Demo Tooling

29. Mobile

30. Mobile
•
We’ve spent a lot of time on finding out which
Mobile Platform

31. Mobile
•
We’ve spent a lot of time on finding out which
Mobile Platform
•
Sencha, JQuery Mobile, Dojo Mobile, etc.

32. Mobile
•
We’ve spent a lot of time on finding out which
Mobile Platform
•
•
Sencha, JQuery Mobile, Dojo Mobile, etc.
Result: mgwt !!

33. Mobile
•
We’ve spent a lot of time on finding out which
Mobile Platform
•
Sencha, JQuery Mobile, Dojo Mobile, etc.
•
Result: mgwt !!
•
Demo: ERP integration with Mobile GWT

34. Demo Mobile

35. Oracle Forms
•
Global Marketplace
•
Default industry standard for more than a
decade
•
Blocking Innovation: Client -Server (2-tier)

36. Demo Forms Wizard

37. So what did we do ?
•
Mentis
•
too.qafe.com
•
Telecommunications Company in
Caribbean

38. What we’ve learned

39. Callbacks
•
Performance Callback
•
IE6
•
Telecommunication company in South
America
•
Callback coding

40. Callbacks
Java GC != Javascript GC

41. Callbacks
service.getShapes(dbName, new AsyncCallback() {
public void onSuccess(Shape[] result) {
}
public void onFailure(Throwable caught) {
} catch (IncompatibleRemoteServiceException e) {
// this client is not compatible with the server; cleanup and refresh
the
// browser
} catch (InvocationException e) {
// the call didn't complete cleanly
} catch (Throwable e) {
// last resort -- a very unexpected exception
}

42. CSS & Dom
•
Reading from IE8, from
com.google.gwt.user.client.DOM class
public static java.lang.String
getStyleAttribute(Element elem,java.lang.String attr)
•
Put “background” in the DOM and get
“BACKGROUND” back.
•
We use LessCSS for clever CSS

43. Dependency Third-party
Libraries
•
gwt-mosaic
•
gwt-incubator
•
Wasn’t rebuilt by Google, had to make explicit request for that
•
Wrapper of JS Libraries were hard!
•
Still using gquery though!

44. Download size
•
http compression of generated
javascript
•
GZIPFilter in HttpResponseHeaderFilter
(web.xml)

45. Styling of Components
•
Complex
•
Our Graphic Designer wasn’t happy
•
gwt-bootstrap seems really nice :)

46. Releases
•
Lower release frequency
•
Risky, updates on browsers are fast
(Chrome) and there were some issues with
GWT Animation.
•
Smaller community

47. Future roadmap

48. Future roadmap
•
From the first build until now a super solid solution!

49. Future roadmap
•
From the first build until now a super solid solution!
•
Cross Browser (even the older ones)

50. Future roadmap
•
From the first build until now a super solid solution!
•
Cross Browser (even the older ones)
•
Tuning in Javascript is immense!

51. Future roadmap
•
From the first build until now a super solid solution!
•
Cross Browser (even the older ones)
•
Tuning in Javascript is immense!
•
Continue to work with GWT

52. Future roadmap
•
From the first build until now a super solid solution!
•
Cross Browser (even the older ones)
•
Tuning in Javascript is immense!
•
Continue to work with GWT

53. Future roadmap
•
From the first build until now a super solid solution!
•
Cross Browser (even the older ones)
•
Tuning in Javascript is immense!
•
Continue to work with GWT

54. Future roadmap
•
From the first build until now a super solid solution!
•
Cross Browser (even the older ones)
•
Tuning in Javascript is immense!
•
Continue to work with GWT
•
Focus on clean HTML output (Web Components!)

55. Future roadmap
•
From the first build until now a super solid solution!
•
Cross Browser (even the older ones)
•
Tuning in Javascript is immense!
•
Continue to work with GWT
•
Focus on clean HTML output (Web Components!)
•
Open Sourcing the QAFE Engine

56. Future roadmap
•
From the first build until now a super solid solution!
•
Cross Browser (even the older ones)
•
Tuning in Javascript is immense!
•
Continue to work with GWT
•
Focus on clean HTML output (Web Components!)
•
Open Sourcing the QAFE Engine
•
Debugging using what we learned at “Compiler Deep Dive”

57. Future roadmap
•
From the first build until now a super solid solution!
•
Cross Browser (even the older ones)
•
Tuning in Javascript is immense!
•
Continue to work with GWT
•
Focus on clean HTML output (Web Components!)
•
Open Sourcing the QAFE Engine
•
Debugging using what we learned at “Compiler Deep Dive”

58. Thanks
Questions ?
!
Rokesh Jankie (rjankie@qafe.com)
(+RokeshJankie)
Salar Abdefaily(sabdefaily@qafe.com)

59. Thanks
Questions ?
Vote for our presentation!
gwtcreate.com/agenda
!
Rokesh Jankie (rjankie@qafe.com)
(+RokeshJankie)
Salar Abdefaily(sabdefaily@qafe.com)