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.

Transcript

1. 5 killer tricks to make your Java webapp look awesome. Scott Wierschem and Andrés Galante
2. Developers Designers
3. Reality Idea
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
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