80
Delivering Native UX in client-side Java applications Nikita Lipsky Excelsior LLC 1

Delivering Native User Experience In Client Side Java Applications

Embed Size (px)

Citation preview

Page 1: Delivering Native User Experience In Client Side Java Applications

Delivering Native UX in client-side Java applications

Nikita Lipsky

Excelsior LLC

1

Page 2: Delivering Native User Experience In Client Side Java Applications

2

Page 3: Delivering Native User Experience In Client Side Java Applications

Web 3.0 – уже сейчас!

3

Page 4: Delivering Native User Experience In Client Side Java Applications

Native apps

• Нативные приложения– Отзывчивы

– Выразительны

– Удобны

– Имеют доступ ко всем ресурсам устройства, которые пожелают

Текущие скорости интернета позволяют их доставлять до пользователя быстро

4

Page 5: Delivering Native User Experience In Client Side Java Applications

Десктоп vs. мобайл

• Планшеты – для потребления контента

• Десктопы – для создания контента

• Тенденция слияния десктопных и планшетных OC:– Windows Surface, Universal apps

– OS X / iOS

– Linux для планшетов

5

Page 6: Delivering Native User Experience In Client Side Java Applications

Причины написания приложения под десктоп

• Доступ к локальной файловой системе

• Возможность работы оффлайн

• Отзывчивость системы

• Эффективность разработки сложного ПО

• Независимость от браузера, установленного у пользователя

6

Page 7: Delivering Native User Experience In Client Side Java Applications

Проблема: кросс-платформенная разработка

7

Page 8: Delivering Native User Experience In Client Side Java Applications

8

Page 9: Delivering Native User Experience In Client Side Java Applications

Кросс-платформенная разработка

• QT / C++

• WebKit / JavaScript + HTML5 / C++

• Java

• Mono / Xamarin / .NET Core

9

Page 10: Delivering Native User Experience In Client Side Java Applications

План доклада

• Обзор UI фреймворков для Java

• Аспекты native UX:

– установка

– старт

– look-n-feel

– восприятие пользователем

10

Page 11: Delivering Native User Experience In Client Side Java Applications

Кто знает про себя ?

• Более 20 лет профессиональной карьеры• Инициатор проекта Excelsior JET

– работал над проектом более 16 лет– как идейный вдохновитель– компиляторный инженер– руководитель– и много в каких еще ролях

• Open source проекты WebFX и Java ReStart– в свободное от работы время

• twitter: @pjBooms

Page 12: Delivering Native User Experience In Client Side Java Applications

Кто знает про Excelsior JET?

• Полная реализация Java SE– c 2005 года cертифицирована как Java Compatible

• AOT compiler + Java Runtime– смешанная компиляция: AOT + JIT– поддержка нестандартных загрузчиков классов в

AOT режиме (для Eclipse RCP, Tomcat)

• Toolkit– Startup Optimizer– Deployment

12

Page 13: Delivering Native User Experience In Client Side Java Applications

Кто знает про Excelsior JET?

Кто знает про Excelsior JET?Кто знает про Excelsior JET?

13

Page 14: Delivering Native User Experience In Client Side Java Applications

UI фреймворки для Java

14

Page 15: Delivering Native User Experience In Client Side Java Applications

UI фреймворки для Java SE

• AWT/Swing

• SWT/JFace

• LibGDX, JOGL

• JavaFX

15

Page 16: Delivering Native User Experience In Client Side Java Applications

Swing

• Входит в стандарт Java SE

• Самописные контролы/эмуляция контроловОС

• Cменяемый look-n-feel

• Netbeans, IntelliJ IDEA

16

Page 17: Delivering Native User Experience In Client Side Java Applications

SWT

• Библиотека, разработанная IBM

• Родные (native) контролы

• Eclipse

17

Page 18: Delivering Native User Experience In Client Side Java Applications

SWT vs. Swing

18

Page 19: Delivering Native User Experience In Client Side Java Applications

SWT vs. Swing

• Pros Swing

– легкость настройки look-n-feel

– можно сделать лучше чем native (JIDE, Alloy)

• Cons Swing

– по умолчанию look-n-feel не совсем native

– многие look-n-feel по умолчанию находят “убогим”

19

Page 20: Delivering Native User Experience In Client Side Java Applications

SWT vs. Swing

• Pros SWT

– действительно native look-n-feel

– легковесный ~2M (работает на compact1 / Apache Harmony / GCJ)

– может работать поверх Swing/JavaFX

• Cons SWT

– тяжело сделать уникальный look-n-feel

– такой же “убогий” как UI операционной системы

20

Page 21: Delivering Native User Experience In Client Side Java Applications

Rich Client Platforms

• Для сложных систем по созданию контента:

– IDE, графические редакторы, системы управления, CRM, научное моделирование, бизнес аналитика, и т.д.

– используются во многих отраслях: оборонная промышленность, космос, транспорт, автопром, наука и т.д.

21

Page 22: Delivering Native User Experience In Client Side Java Applications

Rich Client Platforms

• Модульность

• Готовый каркас: workspace, project, layout

• Средства распространения, обновления

22

Page 23: Delivering Native User Experience In Client Side Java Applications

Rich Client Platforms

• Eclipse RCP (Equinox OSGi)

– https://eclipse.org/community/rcpcp.php

• Netbeans RCP (Netbeans modules)

– https://netbeans.org/features/platform/showcase.html

• IntelliJ Platform (IntelliJ plugins)

– JetBrains IDEs, Google Android Studio

23

Page 24: Delivering Native User Experience In Client Side Java Applications

Кто использует Java based RCP

24

Page 25: Delivering Native User Experience In Client Side Java Applications

JavaFX

• Scene graph

• Анимация, визуальные эффекты

• FXML, CSS

• Скриптовые языки: JavaScript, Groovy, JRuby

• Multi touch

• Бизнес-графика, media, 3D

• Аппаратное ускорение графики

• HTML5 & WebView (на основе WebKit)

25

Page 26: Delivering Native User Experience In Client Side Java Applications

Scene Graph vs. Layout Managers

Page 27: Delivering Native User Experience In Client Side Java Applications

Layout Manager

Page 28: Delivering Native User Experience In Client Side Java Applications

Scene Graph

28

Page 29: Delivering Native User Experience In Client Side Java Applications

JavaFX WebView

29

Page 30: Delivering Native User Experience In Client Side Java Applications

JavaFX Hybrid Apps

30

Десктопные приложения вместо веба с апплетами

Page 31: Delivering Native User Experience In Client Side Java Applications

Live demo

http://javarestart.com

31

Page 32: Delivering Native User Experience In Client Side Java Applications

Кто использует JavaFX

32

http://www.oracle.com/technetwork/java/javase/community/javafx-community-2158661.html

Page 33: Delivering Native User Experience In Client Side Java Applications
Page 34: Delivering Native User Experience In Client Side Java Applications

JavaFXPorts.org

• iOS & RoboVM

• Android & LodgON

34

Page 35: Delivering Native User Experience In Client Side Java Applications

Native clients

35

Page 36: Delivering Native User Experience In Client Side Java Applications
Page 37: Delivering Native User Experience In Client Side Java Applications

Native clients

• Правило №1:

– Ваш пользователь не должен знать, что такое Java. Не должен!

• Решение:

– Ваше приложение должно запускаться как .exe целевой платформы

– Не зависеть от Java, установленной у клиента

37

Page 38: Delivering Native User Experience In Client Side Java Applications

Java to Exe

Сделать из Java исполняемый файл целевой платформы не просто …

38

Page 39: Delivering Native User Experience In Client Side Java Applications

Java to Exe

Сделать из Java исполняемый файл целевой платформы не просто

а очень просто!

39

Page 40: Delivering Native User Experience In Client Side Java Applications

Java to Exe

Сделать из Java исполняемый файл целевой платформы не просто

а очень просто!

И совершенно бесплатно!

40

Page 41: Delivering Native User Experience In Client Side Java Applications

Java to Exe

• Можно самому

– Invocation API

• Много бесплатных (и платных) инструментов

– Launch4J

– Exe4J

– etc.

Tip: Google “Java to Exe”

41

Page 42: Delivering Native User Experience In Client Side Java Applications

Native bundle

Чтобы устранить зависимость от JRE нужно …

42

Page 43: Delivering Native User Experience In Client Side Java Applications

Native bundle

Чтобы устранить зависимость от JRE нужно

просто включить JRE целиком

в состав приложения

43

Page 44: Delivering Native User Experience In Client Side Java Applications

Native bundle

Чтобы устранить зависимость от JRE нужно

просто включить JRE целиком

в состав приложения

Это абсолютно легально по лицензии на JRE (но включать надо все файлы JRE, за редким исключением)

44

Page 45: Delivering Native User Experience In Client Side Java Applications

Native bundle

Self-contained directory:

45

Page 46: Delivering Native User Experience In Client Side Java Applications

Native bundle

Теперь ваше приложение распространяется простым копированием

– можно завернуть в дистрибутив целевой платформы

Бесплатные инсталляторы: WiX, InnoSetup, NSIS, Excelsior Installer

Платные: InstallAnywhere, InstallShield

46

Page 47: Delivering Native User Experience In Client Side Java Applications

Java-aware инсталляторы

• Java Packager (требует WiX или InnoSetup)– Ant task– Maven plugin

(https://github.com/javafx-maven-plugin/javafx-maven-plugin )

• IzPack (free)

• Install4J (commercial) – Instant splash– Autoupdates– И много чего еще

47

Page 48: Delivering Native User Experience In Client Side Java Applications

Native bundle

• Private JRE увеличивает дистрибутив на 30-70 MB

Можно ли уменьшить эти издержки?

48

Page 49: Delivering Native User Experience In Client Side Java Applications

Small Private JRE

• Лицензия на Oracle JRE запрещает его “уменьшать”

• Альтернативные открытые реализации Java:

– OpenJDK

– Apache Harmony/Android classlib

– GNU Classpath

49

Page 50: Delivering Native User Experience In Client Side Java Applications
Page 51: Delivering Native User Experience In Client Side Java Applications

Compact Profiles

Compact1 Compact2 Compact3

java.lang java.rmi java.lang.instrument

java.io java.sql java.lang.management

java.math javax.transaction javax.management

java.nio javax.xml javax.naming

java.util org.w3c.dom javax.script

java.net org.xml.sax javax.security

java.security javax.sql

javax.crypto javax.xml.crypto

java.text org.ietf.jgss

51

Есть в Java SE Embedded и OpenJDK

Page 52: Delivering Native User Experience In Client Side Java Applications

Compact Profiles: размеры

• Compact1: 11MB

• Compact2: 15MB

• Compact3: 21MB

Замечание: размеры на диске (ROM)

52

Page 53: Delivering Native User Experience In Client Side Java Applications

Project Jigsaw

53

Page 54: Delivering Native User Experience In Client Side Java Applications

Excelsior Java Runtime Slim-Down

• Java SE API делится на компоненты:– Kernel, XML, SQL, CORBA, AWT/Java2D, Swing, etc.

• анализатор определяет какие компоненты “нужны”– содержат достижимые методы

54

Page 55: Delivering Native User Experience In Client Side Java Applications

Глобальный анализатор

Application

Java SE API

Entry points- used- not used- component’s boundary

55

Page 56: Delivering Native User Experience In Client Side Java Applications

Java Runtime Slim-Down• Пользователю предоставляются:

– результаты анализа c возможностью исключить неиспользуемые компоненты

56

Page 57: Delivering Native User Experience In Client Side Java Applications

Java Runtime Slim-Down

• Исключенные компоненты:– помещаются на веб-сервер (доступны

приложению)

– загружаются VM по требованию

• Соответствует Java SE спецификации!

57

Page 58: Delivering Native User Experience In Client Side Java Applications

Java Packager vs. Runtime Slim-Down

Java Packager Java Runtime Slim-Down

Ensemble Demo 41 MB 20 MB

BrickBreaker 37 MB 12 MB

58

Page 59: Delivering Native User Experience In Client Side Java Applications

Cтарт приложения

59

Page 60: Delivering Native User Experience In Client Side Java Applications

Что делает JVM на старте

60

Page 61: Delivering Native User Experience In Client Side Java Applications

JVM with AOT

61

Page 62: Delivering Native User Experience In Client Side Java Applications

62

Page 63: Delivering Native User Experience In Client Side Java Applications

Как ускорить старт без AOT

• Instant splash

• Выяснить, какие классы грузятся на старте, и перепаковать ваши jars в порядке загрузки классов

– VM arg: -verbose:class

• Упаковать все jar в один (One-Jar, Autojar)

63

Page 64: Delivering Native User Experience In Client Side Java Applications

Look-n-feel

64

Page 65: Delivering Native User Experience In Client Side Java Applications

Look-n-feel

Миф о native look-n-feel:

Приложение только тогда нативное,когда оно выглядит ”привычно” для конечного пользователя и похоже на другие приложения данной операционной системы

65

Page 66: Delivering Native User Experience In Client Side Java Applications

“Native” Look-n-feel

66

мгновенное отклик

Page 67: Delivering Native User Experience In Client Side Java Applications

“Native” Look-n-feel

67

Page 68: Delivering Native User Experience In Client Side Java Applications

Look-n-feel

• Приложение воспринимается как родное:

– интуитивно понятный интерфейс

– мгновенный отклик

– выглядит хорошо

– UI разработан профессионалами в областях графического дизайна и UX

– с учетом HIG (human interface guidelines) целевой платформы

68

Page 69: Delivering Native User Experience In Client Side Java Applications

“Native” Look-n-feel

69

мгновенное отклик

Page 70: Delivering Native User Experience In Client Side Java Applications

Look-n-feel

Мечта дизайнера:

–Делать программы без программистов

70

Page 71: Delivering Native User Experience In Client Side Java Applications

JavaFX Scene Builder

71

Page 72: Delivering Native User Experience In Client Side Java Applications

JavaFX Scene Builder

• Действительно WYSIWYG

– Манипуляция ровно теми же объектами, что и потом “идут в бой”

• Порождает FXML

– Понимает рукописный FXML

• Легко расширяется вашими контролами

– Как first class citizen

• Сейчас – open source

72

Page 73: Delivering Native User Experience In Client Side Java Applications

Отзывчивость UI

73

Page 74: Delivering Native User Experience In Client Side Java Applications

Отзывчивость UI

74

Page 75: Delivering Native User Experience In Client Side Java Applications

Отзывчивость UI

75

Page 76: Delivering Native User Experience In Client Side Java Applications

Отзывчивость UI

• JIT хорошо работает для горячего кода

• UI приложения – пример приложений без ярко выраженного горячего кода

– Профиль исполнения практически плоский

– JIT долго греется

• AOT работает лучше, оптимизируя каждую строчку кода максимально агрессивно

76

Page 77: Delivering Native User Experience In Client Side Java Applications

JFCMark (Short Run)

0%

50%

100%

150%

200%

250%

2 core Celeron, 2.6Ghz 4 core i5, 3.8Ghz

Excelsior JET

HotSpot client

HotSpot server

77

Больше – лучше

Page 78: Delivering Native User Experience In Client Side Java Applications

JFCMark (Long Run)

0%

20%

40%

60%

80%

100%

120%

140%

160%

2 core Celeron, 2.6Ghz 4 core i5, 3.8Ghz

Excelsior JET

HotSpot client

HotSpot server

78

Больше – лучше

Page 79: Delivering Native User Experience In Client Side Java Applications

Заключение

• Javа прекрасно подходит для client side– кросс-платформенна– богатый выбор UI фреймворков

• JavaFX – потрясающая технология – практически готова для mobile

• Native bundle для Java приложения – легко!– уникально именованный процесс– независимость от Java у пользователя

• Проектировка UI & UX – дело профессионалов– дизайнеры наше все

• AOT улучшает UX

79

Page 80: Delivering Native User Experience In Client Side Java Applications

Вопросы и ответы

Никита Липский,Excelsior

[email protected]: @pjBooms

80