Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Five Killer Tricks to Make Your Java Web App Look Awesome

Five Killer Tricks to Make Your Java Web App Look Awesome

Java developers are often frustrated with the results they get when trying to design web apps. In the words of Java Champion Bruno Souza, “we always do ugly things... always.” In this session learn a five-step lesson on how to get from a blank page to a fully responsive, mobile-first, accessible dashboard ready to use on enterprise applications. And discover how to apply it on your existing Java web codebase. The session also covers how to use Bootstrap, the world’s most popular front-end component library, and explores Patternfly, a Bootstrap-based UI framework for enterprise web applications. Come away understanding how to connect to your legacy Java back-end frustration-free, giving your web app an instant facelift that your customers will love.

03dc4f2e26e476958c952505c8d8f563?s=128

Andres Galante

October 01, 2017
Tweet

Transcript

  1. 5 killer tricks to make your Java webapp look awesome.

    Scott Wierschem and Andrés Galante
  2. Developers Designers

  3. Reality Idea

  4. None
  5. “We always do ugly things... always…” Bruno Souza, Java Champion

  6. “I have a hard time with alignment.” Bazlur Rahman, JUG

    leader “What frustrates me is the time I spend to get the layout the way I'd like it to be.” Gustavo Muniz do Carmo, Java Developer
  7. ! ! ! ! Visuals Responsive Accessible Performance GREAT EXPERIENCES

  8. Top Ten Worst Things That Could Happen In Life (According

    to the Internetz) https://www.thetoptens.com/worst-things-could-happen-life/
  9. LEGACY JAVA APPS!

  10. AGENDA • 5 practical tricks to make your app look

    great • How to use Bootstrap • How to build a Dashboard with PatternFly • How to integrate it on legacy Java apps
  11. Developer Scott Wierschem @scott_wierschem Houston, TX Designer Andrés Galante @andresgalante

    Buenos Aires, Argentina
  12. None
  13. UNDERSTAND YOUR USER’S NEEDS 1

  14. WARNING! Never assume you know your users. UNDERSTAND YOUR USER’S

    NEEDS 1
  15. The 5 user research steps even you can do! 1.

    Find a user 2. Give them a task to do 3. Watch them use your product 4. Have a discussion UNDERSTAND YOUR USER’S NEEDS 1
  16. 6. Repeat! UNDERSTAND YOUR USER’S NEEDS 1

  17. CREATE GREAT CONTENT 2

  18. Content is your most important asset CREATE GREAT CONTENT 2

  19. JS CSS HTML CONTENT CREATE GREAT CONTENT 2

  20. CREATE GREAT CONTENT 2

  21. The world's most popular front-end component library to build responsive,

    mobile-first projects on the web. getbootstrap.com CREATE GREAT CONTENT 2
  22. CREATE GREAT CONTENT 2 DEMO

  23. BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs 3

  24. Responsive BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs 3

  25. Accessibility BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs 3

  26. BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs 3

  27. Internet Explorer 9.0 0.96% Internet Explorer 10.0 0.72% Color blind

    ~9% BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs 3
  28. The web is accessible by default! If your website is

    not accessible, it’s your fault. BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs 3
  29. Performant 3 BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs

  30. Average attention span: 2000: 12 seconds 2015: 8 seconds http://www.statisticbrain.com/attention-span-statistics/

    3 BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs
  31. http://www.statisticbrain.com/attention-span-statistics/ 9 seconds BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs 3

  32. LIQUID CAT Responsive Accessible Performant 3 BUILD ACCESSIBLE, RESPONSIVE, AND

    PERFORMANT UIs
  33. UI Structures Components Layouts 3 BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT

    UIs
  34. Components Layouts " 3 BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs

  35. Components Layouts ! 3 BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs

  36. DEMO 3 BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs

  37. ESTABLISH A MAINTAINABLE ARCHITECTURE 4

  38. ESTABLISH A MAINTAINABLE ARCHITECTURE 4 CSS is like a bear

    cub. Cute and inoffensive but as he grows, he'll eat you alive.
  39. ESTABLISH A MAINTAINABLE ARCHITECTURE 4

  40. Extending components Your Application Your UI Components Bootstrap Components "

    ESTABLISH A MAINTAINABLE ARCHITECTURE 4
  41. Your Application Your UI Components Bootstrap Components ! Isolating components

    ESTABLISH A MAINTAINABLE ARCHITECTURE 4
  42. Let each thing be the thing. And not an extension

    of another thing. ESTABLISH A MAINTAINABLE ARCHITECTURE 4
  43. ESTABLISH A MAINTAINABLE ARCHITECTURE 4

  44. ESTABLISH A MAINTAINABLE ARCHITECTURE 4 DEMO

  45. KEEP CONSISTENCY 5

  46. https://www.nngroup.com/articles/top-10-mistakes-web-design/ “...when things always behave the same, users don't have

    to worry about what will happen. Instead, they know what will happen based on earlier experiences” Jakob Nielsen KEEP CONSISTENCY 5
  47. CREATE VARIABLES FOR KEEP CONSISTENCY 5 • Shadows • Borders

    • Animations • Spaces • Typography • Colors
  48. DESIGN TIPS • Use just one Font family. • Choose

    one primary and one accent color. • Follow the KISS rule. (Keep It Simple Stupid) KEEP CONSISTENCY 5
  49. Understand your user’s needs Create great content Build accessible, responsive,

    and performant UIs Establish a maintainable architecture Keep Consistency 1 2 3 4 5
  50. PATTERNFLY

  51. PATTERNFLY

  52. http://atomicdesign.bradfrost.com/chapter-4/ PATTERNFLY

  53. http://atomicdesign.bradfrost.com/chapter-4/ PATTERNFLY

  54. http://atomicdesign.bradfrost.com/chapter-4/ PATTERNFLY

  55. PATTERNFLY = + ❤

  56. Data tables Awesome fonts Bootstrap select Date pickers C3 charts

    Cards Dashboards Bootstrap Spin Bootstrap Touchspin Google Code Prettify Bootstrap Tree view support for IE9 and more! PATTERNFLY
  57. PATTERNFLY DEMO

  58. bitly.com/pf-j1 PATTERNFLY

  59. patternfly.org PATTERNFLY

  60. bitly.com/amazing-apps Andrés Galante @andresgalante

  61. HOW CAN I ACTUALLY USE THIS IN A JAVA APP?

    SCOTT
  62. HOW CAN I ACTUALLY USE THIS IN A JAVA APP?

  63. HOW CAN I ACTUALLY USE THIS IN A JAVA APP?

  64. HOW CAN I ACTUALLY USE THIS IN A JAVA APP?

    Boy Scout's Rule Always leave the campground cleaner than you found it.
  65. HOW CAN I ACTUALLY USE THIS IN A JAVA APP?

    Better. Not Perfect.
  66. HOW CAN I ACTUALLY USE THIS IN A JAVA APP?

    Clean Code by Robert C. Martin "Small things matter.” "God is in the details.”
  67. bitly.com/amazing-apps Scott Wierschem @scott_wierschem Andrés Galante @andresgalante