Learn to Compose and Utilise GWT

Transcription

1 Developers

2 GWT History, Present & Future Daniel Kurka Software Engineer Developers

3 2

4 GWT 3

5 mgwt gwt-phonegap 4

6 5

7 GWT Day History, Present and Future of GWT, Daniel Kurka, Google GWT Team Papick G. Taboada - GWT - Architectures and Lessons learned - Client-Server-Kommunikation mit dem Command Pattern Eintauchen in MVP und Internationalisierung, Andreas Hubmer GWT - write once run everywhere, Katharina Fahnenbruck 6

8 GWT 7

9 GWT toolbox to write Javascript apps in Java clientside framework write, run, test & debug in Java with all the tools not swing for browsers! 8

10 Dev Mode 9

11 GWT Compiler compiles Java to Javascript one Javascript per Browser generated Javascript is highly efficient 100 lines of Javascript => use Javascript after that GWT is better in execution speed & size 10

12 Performance dead code removal inlining renaming zipping secure caching that works! 11

13 Example 12

14 Example Shape s = new Circle(2); // radius 2 12

15 Example Shape s = new Circle(2); // radius 2 double a = s.getarea(); 12

16 Example Shape s = new Circle(2); // radius 2 double a = s.getarea(); Inlining to: 12

17 Example Shape s = new Circle(2); // radius 2 double a = s.getarea(); Inlining to: Circle s = new Circle(2); // radius 2 12

18 Example Shape s = new Circle(2); // radius 2 double a = s.getarea(); Inlining to: Circle s = new Circle(2); // radius 2 double a = (s.radius * s.radius * Math.PI); 12

19 Example Shape s = new Circle(2); // radius 2 double a = s.getarea(); Inlining to: Circle s = new Circle(2); // radius 2 double a = (s.radius * s.radius * Math.PI); gets optimized to (constant removal): 12

20 Example Shape s = new Circle(2); // radius 2 double a = s.getarea(); Inlining to: Circle s = new Circle(2); // radius 2 double a = (s.radius * s.radius * Math.PI); gets optimized to (constant removal): double a = ; 12

21 deferred binding like reflection at compile time select the implementation per browser => Javascript only contains relevant parts to the specific client 13

22 What about Javascript? like assembler in C: private native void dosomething()/*-{ //your js code... }-*/; 14

23

24 GWT 16

25 GWT 17

26 GWT JavaScript 18

27 GWT JavaScript Browsers 19

28 JavaScript the fun part do not get me wrong I like JavaScript but there are some problems lets take a look at them 20

29 Double equals 21

30 Demo 22

31 functional programming language has its problems you need to learn it in order to use it can be lots of fun 23

32 GWT 24

33 Understand how the browser works 25

34 26

35 A browsers job present a web resource - request it from a server - analyze it - display it defined by standards, WC3 Committee (HTML spec, CSS spec,..) for a long time browsers did not conform to the spec this what HTML5 changed 27

36 High level structure User Interface Browser engine Data Persistence Rendering engine Networking JavaScript Interpreter UI Backend 28

37 Rendering engine 29

38 Parsing HTML to construct the DOM tree 30

39 Parsing HTML to construct the DOM tree Render tree construction 31

40 Parsing HTML to construct the DOM tree Render tree construction Layout of the render tree 32

41 Parsing HTML to construct the DOM tree Render tree construction Layout of the render tree Painting the render tree 33

42 Webkit HTML Style Sheets 34

43 Webkit HTML HTMLParser Style Sheets 35

44 Webkit HTML HTMLParser DOM Tree Style Sheets 36

45 Webkit HTML HTMLParser DOM Tree Style Sheets CSS Parser 37

46 Webkit HTML HTMLParser DOM Tree Style Sheets CSS Parser Style rules 38

47 Webkit HTML HTMLParser DOM Tree Attachment Style Sheets CSS Parser Style rules 39

48 Webkit HTML HTMLParser DOM Tree Attachment Render tree Style Sheets CSS Parser Style rules 40

49 Webkit HTML HTMLParser DOM Tree Layout Attachment Render tree Style Sheets CSS Parser Style rules 41

50 Webkit HTML HTMLParser DOM Tree Layout Attachment Render tree Painting Style Sheets CSS Parser Style rules 42

51 Webkit HTML HTMLParser DOM Tree Layout Attachment Render tree Painting Display Style Sheets CSS Parser Style rules 43

52 Webkit DOM HTML HTMLParser DOM Tree Layout Attachment Render tree Painting Display Style Sheets CSS Parser Style rules 44

53 Layout thrashing 45

54 Order of execution JavaScript parsing model is synchronous script tag blocks parsing (needs to be fetched and executed) - defer, async speculative parsing => prefetch resources stylesheets are treated different (can not alter the DOM) - they block initial painting PageSpeed - great tool to help you with this!

55 Rendering Engine Threads single threaded for almost anything network IO is in a different thread main thread does everything either execute layout engine or javascript 47

56 Performance 48

57 Performance understand the platform different kind of performances - startup - runtime - javascript performance - layout engine performance 49

58 GWT helps you building on the web platform you have to understand the underlying platform GWT is not about hiding the web GWT makes the web a better place for developers and users - better development tools - faster apps 50

59 History 51

60 Why? 52

61

62 The future of the web? 54

63 Flash 55

64 Silverlight 56

65

66

67 JavaScript had major flaws in 2005 no real tooling (alert debugging) no people with knowledge of the language Google needed a better tool 59

68 Java lots of tools many developers but: no web apps in Java 60

69 What if? 61

70 Leverage the Java ecosystem reuse knowledge reuse all the tools, like IDEs many developers 62

71 Why don t we compile Java to JavaScript 63

72 basic idea 64

73 GWT is not about hiding the web GWT does not hide the web brings tools and engineering to the platform GWT wants to make the web a better place for developers and users 65

74 The web is a great platform does not depend on one company reaches every device is build on standards has evolved so fast in the last years 66

75 GWT is massive GWT 1.0 (2006) GWT 1.3 (2007) First Open Source Release, OSX support GWT 1.4 (2007) JUnit and ImageBundle GWT 1.5 (2008) Java 1.5 support, Overlay Types, DOM API, CSS Themes, Linkers GWT 1.6 (2009) EventHandlers, EMMA Support, WAR support, Parallelized Builds GWT 1.7 (2009) Newer browser support, IE8, GPE and AppEngine GWT 2.0 (2009) DevMode, DraftCompile, UIBinder, LayoutPanel, CodeSplitter, ClientBundle, CssResource GWT 2.1 (2010) RequestFactory, Editor Framework, Validation, MVP, Cell Widgets GWT 2.2 (2011) GWT Designer, HTML5 support GWT 2.3 (2011) Better AppEngine integration GWT 2.4 (2011) Maven and RequestFactory enhancements GWT 2.5 (2012) Super Dev mode, massive compiler improvements, Source maps, massive speed improvements, Elemental 67

76 Present 68

77 Today SDK downloaded over a million times 100,000+ active developers deep integration with many tools like Eclipse, IntelliJ, String STS/Roo Used by many Google products such as Adwords, Flights, Blogger, Wallet and many more Fun things: GwtQuake, Angry Birds for the web GWT is a mature, high quality code base 69

78 GWT 2.5 New Compiler Optimizations Closure Compiler Integration Code Splitter Improvements Better Stack Traces with SourceMaps Real Time Compiles with SuperDevMode UiBinder and CellWidget updates I18N and ARIA/Accessibility improvements Elemental - High performance, feature complete, HTML5 70

79 Ray Cromwell, Google I/O 2012

80 Ray Cromwell, Google I/O 2012

81 Ray Cromwell, Google I/O 2012

82 Ray Cromwell, Google I/O 2012

83 Ray Cromwell, Google I/O 2012

84 Source maps Bidirectional Mapping between Source Language and Compiled JavaScript Supported by GWT, Closure, CoffeeScript Emerging standard for Javascript cross-compilers Permits de-obfuscation of Javascript Allows GWT to construct more accurate Java stack traces when something goes wrong Chrome only for now, Firefox support on the way 76

85 Super Dev mode Fast Refresh without Browser Plugins Compile to Javascript in seconds (typically less than 10) Source level Java debugging right in your Browser supporting mobile browser debugging for Chrome and Mobile Safari 77

86 UiBinder and CellWidget enhancements Support for rendering CellWidget Cells via UiBinder templates - introduces new tagging interface UiRenderer associated with.ui.xml file - GWT.create() on UiRenderer generates implementation - Rather than bind elements, it is invoked like I18N Message or SafeHtmlTemplate classes - Returns HTML with values from Java objects substituted into it UiBinder construction/instantiation improvements - New IsRenderable/RenderablePanel - Binds a UI in a 2-pass process First generate all HTML collecting it into a large string Second install it into the DOM via innerhtml and bind elements to fields - Significantly reduce latency and improve rendering speed - Case Study: Orkut. Startup latency reduced by 20%, rendering speed 300% faster 78

87 Elemental Auto-generated completely from actual WebIDL browser files used by JS engines - Don t wait for hand wrappers, track the actual browser vendor specs/source 100% JavaScript overlay types behind Java interfaces which melt away after compilation Practically zero overhead Every HTML5 feature supported, even the bleeding edge - WebGL, WebAudio, WebSockets, WebRTC, Web Intents, Shadow DOM, File API, etc New Collection classes optimized for size and performance - map directly to underlying JS collections with no overhead New JSON library, no wrappers, no overhead, high performance - Collections and JSON work on server in non-gwt/non-js environments too Excellent thin library for direct mobile device development or desktop 79

88 GWT Steering committee To make contributing features or fixes to GWT as effortless as possible Maintain a high level of quality you ve come to expect Allow the community a greater level of participation in GWT s future Google goes from gatekeeper to a peer amongst equals Responsible for setting project Guidelines, Policies, and Philosophy Determines who gets direct commit access to the master branch Sets overall future roadmap 80

89 GWT Steering committee members Ray Cromwell (Google) Artur Signell (Vaadin) Colin Alworth (Sencha, GXT) Mike Brock (RedHat, Errai/JBoss) Thomas Broyer (individual contributor) Stephen Haberman (Bizo) Daniel Kurka (Google) Christian Goudreau (Arcbees, GWTP Library) Konstantin Solomatov (JetBrains, IntelliJ) 81

90 Open source improve community feedback get people involved we happily accepted many contributions and plan to do so in the future feel free to contact us 82

91 gwtproject.org community driven home for GWT build with GWT (GWTQuery) everyone can edit and update using normal contribution workflow contribute via markdown & git 83

92 Issue tracker closed around 2500 issues fast responding to new issues fixed many issues for GWT

93 Future 85

94 Tick-tock two releases per year expect GWT 2.6 sometime in December, maybe at GWT.create? it is done when it is done, high quality 86

95 Incremental compile Only compile the changes you need to compile Makes a significant impact on your round trip time Biggest change to the GWT compiler ever Experimental in GWT 2.6, Ready with GWT

96 Java 8 support Java 8 will reset the Java eco system boiler plate will melt away, especially in GWT code already got a prototype using Java 8 committed to get it out asap after Java 8 release 88

97 JS interop use any JavaScript library in GWT without JSNI no more hand wrapping no more extra price merge the closure AST with GWT compile JavaScript and Java code together will allow GWT developers to consume web compontents 89

98 JavaScript speedups Run GWT code as d8 benchmarks understand how this impacts VM performance make all GWT code run faster recent improvement 6x for Arrays (benchmark, FF) 90

99 first class mobile support 91

100 GWT has a bright future many new things coming this year and next year watch out for GWT IO 2014 great participation from the community updating GWT to be a great tool for the next years 92

101 GWT 93

102 Java ecosystem is large GWT is an important part of that ecosystem closes the loop for great web front ends used by many people world wide used in many Google products we continue to invest one of the best tools out there 94

103 GWT vs. Dart Google is a big company with many engineers each team chooses their tools some like JavaScript, some like GWT, some like Dart Google is not one tools fits all Dart has great ideas and they help GWT GWT inspired some ideas in Dart Google loves friendly competition, it makes our tools better! If you like JavaScript use Closure or Angular -... Java use GWT -... something new try Dart more choice is good! 95

104 Who else? dependency injection IDE support code splitting CSS optimizations Java tool support client side templating integrate with all other JavaScript run very fast be as small as possible testing tools with code coverage a big community with many support OS projects make your app faster with a recompile 96

105 97

106 12-13th Dec. - San Francisco 17-18th Dec. - Frankfurt community organized about 60 talks, including many talks from the GWT team 98

107 Community 99

108

109 Daniel Kurka gplus: google.com/+danielkurka

110 Developers

111 10 ways to improve your GWT app 102

112 1. Blocking is bad Avoid blocking script tags GWT knows how to load async => use it Inline Resources and inject them (if you really need external JS, CSS) 103

113 //Inline the resource public interface Bundle extends ClientBundle TextResource yourjs(); } //in your code Bundle bundle = GWT.create(Bundle.class); String script = bundle.yourjs().gettext(); ScriptInjector.fromString(script).inject(); 104

114 2. HTTP Batching Browser only have a certain amount of parallel connections Use batching to get more throughput different ways 105

115 Batching with GWT RPC use the command pattern e.g. gwt-dispatch use Scheduler.scheduleFinally to do batching 106

116 Batching with RequestFactory don t call fire immediately call fire at last batching support across different context 107

117 3. Batch DOM updates reduces flickering use Scheduler.scheduleFinally() 108

118 4. Make Async stuff Sync GWT.runAsync is hard to read AsyncProxy records all calls while getting the actual object and replays them 109

119 5. Change DOM offscreen some browser repaint on update (IE) manipulate of screen to reduce repaints be faster 110

120 6. RPC type explosion GWT RPC generates Serializers for every type compile time increase, script size increase use plain DTOs without Polymorphism use concrete types (e.g. ArrayList instead of List) black list unwanted types (Issue 4438) 111

121 7. Use HTML where possible widgets are slower than pure HTML use widgets only where necessary use CellWidgets if possible combine HTML and widgets in UiBinder 112

122 8. Code splitting code splitting can dramatically reduce startup time combine it with AsyncProxy Activities as a code splitting point (automated, see Issue 5129) 113

123 9. Compiler tricks tune the compiler for your project set variables while developing (e.g. user agent safari) 114

124 -XdisableClassMetadata no class meta data e.g. no java.util.class.getname() save space if you don t need it 115

125 -XdisableCastChecking JavaScript errors if you do things wrong no warnings no instanceof 116

126 Tune compilereport <set-property name="compiler.stackmode" value="strip"/> <set-configuration-property name="cssresource.obfuscationprefix" value="emtpy"/> <set-configuration-property name="compiler.enum.obfuscate.names" value="true"/> 117

127 10. Prefer GWT libs instead of wrappers GWT can only optimize on Java code wrapping means no optimizations prefer complete GWT implementations 118

128

129 Daniel Kurka gplus: daniel-kurka.de/+

130 Developers