Create a delightful web with good DX

Slide 1

Slide 1 text

Create a delightful web with good DX Irfan Maulana Principal Engineer @ Tokopedia

Slide 2

Slide 2 text

‍ A career path 2013 2015 2018 2019 2013 Java Web Developer 2015 Frontend Devs 2018 Frontend Devs 2019 Principal Eng

Slide 3

Slide 3 text

● A family man, father of two cutes children ● Graduate with almost zero skill in coding ● 11-ﬁnger typers ● Have my ﬁrst laptop in 2011 Fun facts

Slide 4

Slide 4 text

Connect with me

Slide 5

Slide 5 text

What is delightful website? ☕

Slide 6

Slide 6 text

‍♂ What users expect Secure Secure in network and information Speed How fast your website being loaded and ready for interactivity Engaging Good looking, easy navigation, clear call to action, responsive,

Slide 7

Slide 7 text

How to increase your Web speed?

Slide 8

Slide 8 text

Don’t put everything into your web. 1.

Slide 9

Slide 9 text

Only request necessary resources. 2.

Slide 10

Slide 10 text

Compress everythings. 3.

Slide 11

Slide 11 text

How to increase your Web Engagement?

Slide 12

Slide 12 text

Research and give what users needs 1.

Slide 13

Slide 13 text

Keep it simple 2.

Slide 14

Slide 14 text

Keep it fast 3.

Slide 15

Slide 15 text

How to increase your Web Security?

Slide 16

Slide 16 text

Https for the win. 1.

Slide 17

Slide 17 text

Secure your network 2.

Slide 18

Slide 18 text

Pen-test before release 3.

Slide 19

Slide 19 text

Nobody’s 100% secure 4.

Slide 20

Slide 20 text

What is DX? ⏳

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Developer is also Users

Slide 24

Slide 24 text

‍♂ What web devs wants Easy Integration No more manual job running, manual code standard check, manual deployment, etc. Cool Stacks Coding with a cool, modern and latest technology stacks Hot Reload All the results will auto reload and showing the latest when you save the code

Slide 25

Slide 25 text

‍ It’s coding time. Let’s get our hands dirty!

Slide 26

Slide 26 text

Prerequisite ● Latest Node.js, alongside with NPM/Yarn ● Git ● Github Account ● Cool Text Editor (do not use notepad ya!) ● Basic knowledge in HTML, CSS, JS ● Fast Internet please

Slide 27

Slide 27 text

We will learn about ● The latest cool tech stack for develop website ● Collaborations standard in development process ● Continuous integration and delivery All with the industry standard...

Slide 28

Slide 28 text

Basic Website ● Learn basic HTML, CSS, JS

Slide 29

Slide 29 text

CSS Framework Teaser ● Using CSS Framework: Bootstrap / Bulma / Tailwind

Slide 30

Slide 30 text

Better DX with Modern Stacks ● Learn basic Webpack/Parcel ● Move to CSS Preprocessor ● Move to Modern JS

Slide 31

Slide 31 text

Git for Collaborations ● Learn basic Git ● Learn free static hosting: GH Pages/Netlify

Slide 32

Slide 32 text

CI/CD for save your time ● Learn basic CI/CD: Travis CI / CircleCI ● Static Code Analysis: Codacy /Code Climate

Slide 33

Slide 33 text

JS Framework Teaser ● Learn basic JS Framework: React / Vue / Svelte ● Common CI/CD for JS framework

Slide 34

Slide 34 text

Key Takeaways ● Be curious, never ending learning, adapt with latest updates. ● The tools made your job easier, but it won’t solve all your job tasks. ● The person behind makes a diﬀerence.