aplica es web que permanecem
play

Aplicaes web que permanecem: uma abordagem arquitetural Java que vai - PowerPoint PPT Presentation

Aplicaes web que permanecem: uma abordagem arquitetural Java que vai alm do ltimo framework JS da moda Eder Ignatowicz Sr. Software Engineer Red Hat Qual arquitetura e frameworks para o backend? Java 9 modular, Reactive,


  1. <!-- Masthead --> <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 " > <!-- navbar-iconic --> <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 &amp; 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" > <li><a href="#" > Preferences </a></li> <li><a href="#" > Logout </a></li> </ul> </li> </ul> </div> </nav> <div class="container-fluid kie-blank-slate" > <!-- blank state content --> <div class="blank-slate-pf row" > <div class="col-xs-12 col-lg-9" style="text-align:right;" ><a href="" ><span class="fa fa-gear" ></span> Settings </a></div> <h1 id="welcome" > <!--<div style="float:right;"><a href=""><span class="fa fa-gear"></span> Settings</a></div>--> Welcome to <b> BPM Suite </b> </h1> <p> Business Process Management (BPM) Suite offers a set of flexible, process management tools that support the way you need to work. Select a BPM tool below to get started. </p> <div class="blank-slate-pf-secondary-action" > <div class="kie-hero-card" id="demo1" >

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

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

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

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

  6. "Architecture is about intent. We have made it about frameworks and details” Robert C. Martin

  7. Regular FS UBERFIRE VFS VFS Use Cases API Clustering GIT FS

  8. Qual framework Web escolher?

  9. Qual framework JS escolher?

  10. Perigo Primeiro Release Anos 0 2 3 4 5 6 1 Escolha do framework JS

  11. What’s next for Angular 1.x? "In all honesty, no one really knows what will happen" https://toddmotto.com/future-of-angular-1-x

  12. Projeto Encerrado Projeto Encerrado ou a nova versão ou a nova versão não tem retrocompatibilidade não tem retrocompatibilidade Entrega Curva de Aprendizado Curva de Curva de Aprendizado Aprendizado Escolha do Framework Reescrita Reescrita JS novo Framework JS novo Framework JS Anos 1 2 3 4 5 6

  13. "A good architecture allows volatile decisions to be easily changed” Robert C. Martin

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

  15. Componentes: Modelo de Programação - Screen - Editors - Perspectives - Popups

  16. LifeCycle: Modelo de Programação OnStart - OnSave - IsDirty - OnClose - OnFocus - OnLostFocus - OnMayClose - OnReveal -

  17. Perspective Screen Editor Screen

  18. Baseado em Contratos Screen -> Interface WorkbenchScreenActivity Editor -> Interface WorkbenchEditorActivity Perspective -> Interface PerspectiveActivity

  19. Uberfire ERRAI Lookup CDI BEAN Perspectives Perspective MANAGER Scan all Perspective Activity Implementations GWT ERRAI UI Perspective Perspective Adapter Adapter OLD GWT Plain HTML Errai WIDGET UI

  20. Código de 7 anos atrás com GWT “old school"

  21. Código da semana passada HTML 5 canvas

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

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

  24. @WorkbenchPerspective (identifier = "HomePerspective", isDefault = true) @Templated public class HomePerspective implements IsElement { @Inject @DataField @WorkbenchPanel (parts = "MoodScreen?uber=fire&uber1=fire1") Div moodScreen; @Inject @DataField @WorkbenchPanel (parts = "HomeScreen?uber=fire") Div homeScreen; @Inject @DataField @WorkbenchPanel (parts = "AnotherScreen") Div anotherScreen; } @JsType public interface PerspectiveActivity{ PerspectiveDefinition getDefaultPerspectiveLayout(); @Override default String getName() { return getDefaultPerspectiveLayout().getName(); } boolean isDefault(); Menus getMenus(); ToolBar getToolBar(); }

  25. function TodoCtrl($scope) { $scope.placeText = "MiscellaneousFeatures"; <div class="container-fluid" ng-controller="TodoCtrl" > <div class="row" > $scope.todos = [ <div class="col-md-12" > {text: 'learn angular', done: true }, <p class="pull-right" style="margin-top: 10px;" > {{remaining()}} of {{todos.length}} remaining [ {text: 'build an angular app', done: false } <a href="" ng-click="archive()" > archive </a> ] </p> ]; <h4> Todos </h4> <ul class="list-group" > $scope.addTodo = function () { <li class="list-group-item" ng-repeat="todo in todos" > $scope.todos.push({text: $scope.todoText, done: false }); <span class="done-{{todo.done}}" > {{todo.text}} </span> $scope.todoText = ''; <input class="pull-right" type="checkbox" ng-model="todo.done" > </li> }; </ul> </div> $scope.remaining = function () { </div> var count = 0; <div class="row" > <div class="col-md-6" > angular.forEach($scope.todos, function (todo) { <form class="form-inline" ng-submit="goto()" > count += todo.done ? 0 : 1; <div class="form-group" > }); <input type="text" ng-model="placeText" size="30" class="form-control" placeholder="place to go" > return count; <input class="btn btn-primary" type="submit" value="GoTo" > }; </div> </form> </div> $scope.archive = function () { <div class="col-md-6" > var oldTodos = $scope.todos; <form class="form-inline pull-right" ng-submit="addTodo()" > $scope.todos = []; <div class="form-group" > <input type="text" ng-model="todoText" size="30" class="form-control" placeholder="add new todo here" > angular.forEach(oldTodos, function (todo) { <input class="btn btn-primary" type="submit" value="Add" > if (!todo.done) { </div> $scope.todos.push(todo); </form> } </div> }); </div> </div> }; $scope["goto"] = function () { $goToPlace($scope.placeText); }; } $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!"); } });

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

  27. Angular JS Screen

  28. Criação de Componentes em Runtime

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

  30. Desenvolvimento Web é complexo

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

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

More recommend