5 pilares para uma aplicação Java Web bem-sucedida

Transcrição

1 5 pilares para uma aplicação Java Web bem-sucedida Eder Ignatowicz Sr. Software Red Hat Guilherme Carreiro Software Red Hat

2

3 Qual arquitetura e frameworks para o backend?

4 E o front-end?

5

6 Desenvolvimento JavaScript é complexo

7 Desenvolvimento JavaScript Web é complexo

8 Desenvolvimento Web vai continuar sendo complexo

9

10

11

12 Qual stack web escolher?

13 Qual a arquitetura mais viável para este problema?

14 Aplicação de Larga Escala 5 pilares: Desenvolvedores full stack Integração com UX Life-Span de 5~10 anos Interoperabilidade

16 Aplicação de Larga Escala 1mi+ de linhas código web 5 produtos ~150 sub-projetos ~30 devs 7+ anos de base de código

17 Aplicação de Larga Escala Static Typing

18 Aplicação de Larga Escala Refactoring

19 Aplicação de Larga Escala

20 Aplicação de Larga Escala Transpilers para JavaScript

21 Aplicação de Larga Escala

22 Aplicação de Larga Escala.java javac.class

23

24

25

26 The Good Parts

27 GWT Good Parts Java to JavaScript

28 GWT Good Parts java.* emulation

29 GWT Good Parts DOM APIs

30 GWT Good Parts Java 8 "client side"

31 GWT Good Parts Dev Tools

32 GWT Good Parts

33 GWT Good Parts JS Interop

34 JS Interop Consume = true) public abstract class JQuery { public native static JQuery $(String selector); public native JQuery css(string prop, String val); public native JQuery attr(string name, String val); Java import static jquery.jquery.$; //... $("ul > li").css("color", "red").attr("data-level", "first");

35 JS Interop Expose Java package public class Dora { public boolean late = true; public Dora() {} public String auau() { return "Hello QCon!";} } JavaScript var dora = new foo.dora(); if (dora.late) { alert(dora.auau()); }

36 Aplicação de Larga Escala Refactoring

38 Desenvolvedores full stack Desenvolvedores end-to-end

39 Desenvolvedores full stack Shared Programming Model

40 Desenvolvedores full stack Java EE no browser

41 Desenvolvedores full stack

42 ERRAI CDI no Browser

43 @Dependent public class ProjectsView { CDI no "projects-view" ) "new-project" ) "projects-list" ) UnorderedList Instance<ProjectItem> projects;

44 CDI no Browser if (!filter.dofilter(event)) { } if (event.kind().equals(standardwatcheventkind.entry_add)) { resourceaddedevent.fire(buildevent(resourceaddedevent.class, event).getk2()); }

45 CDI no Browser public void ResourceAddedEvent event) { } Window.alert("ResourceAddedEvent:" + event.getpath().touri() + " ['" + event.getmessage() + "']");

46 CDI no Browser

47 Browser Browser ERRAI BUS Long Polling Server SSE Browser Web Sockets Browser

48 Desenvolvedores full stack Shared Programming Model

50 <form action="orderresult.jsp" method="post"> <h3>pizza Types</h3> <div> <ul> <% for ( Pizza pizza : pizzatypes ) { %> <li> <input type="radio" name="pizzatypeoptions" value="<%=pizza.getname()%>" checked /> <span class="pizzatype"><%=pizza.getname()%></span> <span class="pizzaprice"><%=pizza.getprice()%>$</span> </li> <% } %> </ul> </div> <h3>size</h3> <h3>extra Toppings</h3> <div class="section group"> <% for ( int j = 0; j < 3; j++ ) { %> <div class="col span_1_of_3"> <ul class="ul_2"> <% for ( int i = slicesize * j; i < ( j + 1 ) * slicesize; i++ ) { %> <li class="li_2"> <input type="checkbox" name="pizzatoppings" value="<%=pizzatoppings.get( i )%>"/> <%=pizzatoppings.get( i )%> </li> <% } if ( j == 0 && remainder > 0 ) { %> <li class="li_2"> <input type="checkbox" name="pizzatoppings" value="<%=pizzatoppings.get( pizzatoppings.size() - 2 )%>"/> <%=pizzatoppings.get( pizzatoppings.size() - 2 ) </li> <% } else if ( j == 1 && remainder > 1 ) { %> <li class="li_2"> <input type="checkbox" name="pizzatoppings" value="<%=pizzatoppings.get( pizzatoppings.size() - 1 )%>"/> <%=pizzatoppings.get( pizzatoppings.size() - 1 )%> </li> <% } %> </ul> </div> <% } %> </div> <h4>each extra topping is 0.65$</h4> <input type="submit" value="order"/> </form>

51 <h1>{{title}}</h1> <h2>my favorite hero is: {{myhero}}</h2> <p>heroes:</p> <ul> <li *ngfor="let hero of heroes"> {{ hero }} </li> </ul>

52 <div> <ul class="list-group" data-field="projects-list"> </ul> <button type="button" class="btn" data-field="new-project"> <i class="fa fa-plus"></i> New Project </button> </div>

53 public class ProjectsView { "projects-view" ) "new-project" ) "projects-list" ) UnorderedList projectslist; }

54

55  <nav class="navbar navbar-default navbar-pf "> <div class="navbar-header "> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-2"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand"> <img src="images/bpmsuite.svg" alt="jboss BPM Suite" /> </a> </div>... <div class="collapse navbar-collapse navbar-collapse-2"> <ul class="nav navbar-nav "> <li class="dropdown"> <a class="dropdown-toggle nav-item-iconic" id="dropdownmenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Home <span class="caret"></span> </a> <ul class="dropdown-menu" aria-labelledby="dropdownmenu2"> <li><a href="#">design</a></li> <li><a href="#">processes & Tasks</a></li> <li><a href="#">runtime</a></li> <li><a href="#">settings</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a class="dropdown-toggle nav-item-iconic" id="notifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <span title="notifications" class="fa pficon-warning-triangle-o"></span> Messages: 0 </a> <div class="dropdown-menu infotip bottom-right"> <div class="arrow"></div> <ul class="list-group"> <li class="list-group-item"> <span class="i pficon pficon-info"></span> Modified Datasources ExampleDS </li> <li class="list-group-item"> <span class="i pficon pficon-info"></span> Error: System Failure </li> </ul> <div class="footer"> <a>clear Messages</a> </div> </div> </li> <li class="dropdown"> <a class="dropdown-toggle nav-item-iconic" id="dropdownmenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <span title="username" class="fa pficon-user"></span> Brian Johnson <span class="caret"></span> </a> <ul class="dropdown-menu" aria-labelledby="dropdownmenu2">

56

57 Integração com UX Deixe o HTML/CSS em paz

59

60 Hexagonal Architecture - Alistair Cockburn Arquitetura Onion Architecture - Jeffrey Palermo DCI - James Coplien e Trygve Reenskaug. BCE - Ivar Jacobson Clean Architecture - Robert C. Martin

61 Independente de Frameworks Princípios Testável Independente de UI Independente de Database Independente de Agentes Externos

62

63 Architecture is about intent. We have made it about frameworks and details Robert C. Martin

64 Regular FS UBERFIRE VFS Use Cases VFS API Clustering GIT FS

65

66 Qual framework Web escolher?

67 Qual framework JS escolher?

68 Perigo Primeiro Release Anos 0 Escolha do framework JS

69 What s next for Angular 1.x? In all honesty, no one really knows what will happen

70 Projeto Encerrado ou a nova versão não tem retrocompatibilidade Projeto Encerrado ou a nova versão não tem retrocompatibilidade Entrega Curva de Aprendizado Curva de Aprendizado Curva de Aprendizado Escolha do Framework JS Reescrita novo Framework JS Reescrita novo Framework JS Anos

71 A good architecture allows volatile decisions to be easily changed Robert C. Martin

72 E se eu tratasse a volatilidade dos frameworks JS como fato?

73

74

75 Modelo de Programação Componentes: Screen Editors Perspectives Popups

76 Modelo de Programação LifeCycle: OnStart OnSave IsDirty OnClose...

77 Perspective Screen Editor Screen

78 Baseado em Contratos Screen Editor Perspective Interface WorkbenchScreenActivity Interface WorkbenchEditorActivity Interface PerspectiveActivity

79 Uberfire Lookup Perspective ERRAI CDI BEAN MANAGER UBERFIRE VFS GWT Perspective Adapter Scan all Perspective Activity Implementations ERRAI UI Perspective Adapter OLD GWT WIDGET Plain HTML Errai UI

80 Código de 7 anos atrás com GWT old school"

81 Código da semana passada HTML 5 canvas

82 Live-Span de 5~10 anos Trate a arquitetura Web com o mesmo respeito que você trata seu backend.

84 @WorkbenchPerspective(identifier = HomePerspective", isdefault = public class HomePerspective implements @WorkbenchPanel(parts = "MoodScreen?uber=fire&uber1=fire1") @WorkbenchPanel(parts = "HomeScreen?uber=fire") Div @WorkbenchPanel(parts = "AnotherScreen") Div public interface PerspectiveActivity{ PerspectiveDefinition default String getname() { return getdefaultperspectivelayout().getname(); } boolean isdefault(); Menus getmenus(); } ToolBar gettoolbar();

85

86 function TodoCtrl($scope) { } $scope.placetext = "MiscellaneousFeatures"; $scope.todos = [ {text: 'learn angular', done: true}, {text: 'build an angular app', done: false} ]; $scope.addtodo = function () { $scope.todos.push({text: $scope.todotext, done: false}); $scope.todotext = ''; }; $scope.remaining = function () { var count = 0; angular.foreach($scope.todos, function (todo) { count += todo.done? 0 : 1; }); return count; }; $scope.archive = function () { var oldtodos = $scope.todos; $scope.todos = []; angular.foreach(oldtodos, function (todo) { if (!todo.done) { $scope.todos.push(todo); } }); }; $scope["goto"] = function () { $gotoplace($scope.placetext); }; <div class="container-fluid" ng-controller="todoctrl"> <div class="row"> <div class="col-md-12"> <p class="pull-right" style="margin-top: 10px;">{{remaining()}} of {{todos.length}} remaining [ <a href="" ng-click="archive()">archive</a> ] </p> <h4>todos</h4> <ul class="list-group"> <li class="list-group-item" ng-repeat="todo in todos"> <span class="done-{{todo.done}}">{{todo.text}}</span> <input class="pull-right" type="checkbox" ng-model="todo.done"> </li> </ul> </div> </div> <div class="row"> <div class="col-md-6"> <form class="form-inline" ng-submit="goto()"> <div class="form-group"> <input type="text" ng-model="placetext" size="30" class="form-control" placeholder="place to go"> <input class="btn btn-primary" type="submit" value="goto"> </div> </form> </div> <div class="col-md-6"> <form class="form-inline pull-right" ng-submit="addtodo()"> <div class="form-group"> <input type="text" ng-model="todotext" size="30" class="form-control" placeholder="add new todo here"> <input class="btn btn-primary" type="submit" value="add"> </div> </form> </div> </div> </div> $registerplugin({ id: "my_angular_js", type: "angularjs", templateurl: "angular.sample.html", title: function () { return "angular " + Math.floor(Math.random() * 10); }, on_close: function () { alert("this is a pure JS alert!"); } });

87 Uberfire Lookup Perspective ERRAI CDI BEAN MANAGER Perspectives GWT Perspective Adapter ERRAI UI Perspective Adapter Scan all Perspective Activity Implementations Angular Perspective Adapter Any JS Perspective Adapter OLD GWT WIDGET Plain HTML Errai UI Angular native Perspective Any JS Framework

88 Angular JS Screen

90 Desenvolvimento Web é complexo

91 Aplicações Web são parte da nossa arquitetura

92 Independente de Frameworks Princípios Testável Independente de UI Independente de Database Independente de Agentes Externos

93 Arquitetura de software é exercício de trade-offs

95 Obrigado. Eder Guilherme

96