FROM HACKATHON TO PRODUCTION IN A YEAR Victor Kropp, JetBrains - - PowerPoint PPT Presentation

▶
from hackathon to production in a year
SMART_READER_LITE
LIVE PREVIEW

FROM HACKATHON TO PRODUCTION IN A YEAR Victor Kropp, JetBrains - - PowerPoint PPT Presentation

Sep 04, 2023 767 likes •1.14k views

FROM HACKATHON TO PRODUCTION IN A YEAR Victor Kropp, JetBrains Software Engineer HI! I am Victor Kropp and I want to tell you a story how we went from hackathon to production in a year and why you should HACKATHON do it to! 48 hours

slide-1
SLIDE 1

FROM HACKATHON TO PRODUCTION IN A YEAR

Victor Kropp, JetBrains Software Engineer

slide-2
SLIDE 2

HI!

I am Victor Kropp

and I want to tell you a story how we went from hackathon to production in a year

slide-3
SLIDE 3

HACKATHON

and why you should do it to!

slide-4
SLIDE 4

48 hours

Just few hours of sleep…

winners’ cup

And valuable prizes too

100+ participants

Mixed teams and not only developers!

slide-5
SLIDE 5

“

Quotations are commonly printed as a means of inspiration and to invoke philosophical thoughts from the reader.

slide-6
SLIDE 6

DO ANYTHING YOU WANT

100 kg musical instrument, drawing robot

  • r a plugin to your favorite IDE
slide-7
SLIDE 7

IDEAFONE

ιδιόφωνο

slide-8
SLIDE 8

dotMemory Unit

MANY PROJECTS WENT TO PRODUCTION

Toolbox App

slide-9
SLIDE 9

TOOLBOX APP

A control panel for your tools and projects

slide-10
SLIDE 10
slide-11
SLIDE 11

Backend Qt C++

THE TOOLBOX APP IS SPLIT INTO

Frontend QtWebEngine (Chromium 56) JavaScript

slide-12
SLIDE 12

RING UI

Our Web UI Controls Library

jetbrains.org/ring-ui

slide-13
SLIDE 13

Pros ▸ Nice ▸ Modern ▸ Everywhere

UI IN HTML/CSS/JS

Cons ▸ Embedded browser may be resource consuming ▸ Frontend expert required

slide-14
SLIDE 14

React declarative JavaScript library for building user interfaces facebook.github.io/react

FRONTEND

slide-15
SLIDE 15

EXAMPLE COMPONENT

class ProjectList extends React.Component { render() { return ( <div> <div className="project-list__search"> <Icon size={Icon.Size.Size14} glyph={require('search.svg')} /> <TextInput ref="input" placeholder="Search" /> </div> <div> {recentProjects.map((project) => ( <Project project={project} /> ))} </div> </div> ); } }

slide-16
SLIDE 16

WEBPACK

JS + dependencies are packed into single index.js and index.html:

myWebView->load(QUrl("qrc:/index.html")); myWebView->load(QUrl("http://localhost:8080"));

slide-17
SLIDE 17

FETCHING PRODUCT DESCRIPTIONS

▸ Single file in JSON ▸ Update regularly ▸ The same JSON is used in both C++ and JS code

slide-18
SLIDE 18

JSON FEED

{ "id": "IDEA-U", "name": "IntelliJ IDEA Ultimate", "description": "The most intelligent Java IDE", "icon_url": "data:image/svg+xml;base64,…", "licensing": { "product": "Idea" }, "build": "171.972.3", "version": "2017.1.2", "major_version": { "name": "2017.1" }, "package": { "os": "windows", "type": "nsis", "command": "bin/idea.exe", "url": "https://download.jetbrains.com/idea/ideaIU-2017.1.2.exe", "size": 407042160, "checksums": [ { "alg": "sha-256", "value": "…" } ] } }

slide-19
SLIDE 19

SEPARATION OF CONCERNS

Model Qt/C++ ViewModel JSON View React/JavaScript

slide-20
SLIDE 20

LESSONS LEARNED

Some obvious things worth repeating

slide-21
SLIDE 21

DREAM TEAM

Windows

CORE DEVELOPERS

macOS Linux UI/UX Designer UI Developer IntelliJ Developer

AND

slide-22
SLIDE 22

CROSS-PLATFORM DEVELOPMENT

▸ There are lots of platform specific things ▸ Every feature must be tested on all supported operating systems

slide-23
SLIDE 23

CROSS-PLATFORM DEVELOPMENT

PLATFORM SPECIFIC

▸ .plist read/write ▸ Menubar icon theming ▸ System wide notifications ▸ OS integration

slide-24
SLIDE 24

AUTOMATE EVERYTHING

▸ Continuous Integration server compiles the app after each commit ▸ and runs tests ▸ Release is published with a single click

slide-25
SLIDE 25

TeamCity

slide-26
SLIDE 26

DESIGN FOR COMPATIBILITY

▸ Backward compatibility ▸ Forward compatibility

slide-27
SLIDE 27

ALWAYS KEEP SECURITY IN MIND

▸ HTTPS only ▸ Signed data source ▸ Checksums for downloads

slide-28
SLIDE 28

DOGFOODING

▸ Use your own application ▸ Get early feedback from colleagues

slide-29
SLIDE 29

PRODUCTION

Successful release

slide-30
SLIDE 30

20% project

Side project supported by company

slide-31
SLIDE 31

100,000+ users

estimated

slide-32
SLIDE 32

https://twitter.com/jnzavrl/status/897000758633168897 https://twitter.com/vedran_pavic/status/753542146842562560

slide-33
SLIDE 33

RECAP

▸ Hackathons are fun ▸ There is a lot to be done afterwards ▸ HTML UI is awesome ▸ Team is the most important

slide-34
SLIDE 34

Place your screenshot here

TOOLBOX APP

Check it out at jetbrains.com/toolbox/app Follow @JBToolbox for updates

slide-35
SLIDE 35

THANKS!

Any questions?

Victor Kropp @kropp victor.kropp@jetbrains.com

slide-36
SLIDE 36

Thank you!

Victor Kropp @kropp victor.kropp@jetbrains.com