Front-End Developer Going Beyond by Oka Uliandana

Berkarir sebagai Front-End Developer? wah kamu berada di presentasi yang tepat. Dalam presentasi ini mas oka berbagi pengalaman nya mengenai karir front-end hingga code basic yang biasa digunakan seorang FE pada umumnya.

Presentasi ini digunakan ketika acara Webinar SurabayaDev with CODEX powered by Telkom Indonesia pada : 23 Juli 2020

Terima kasih Mas Oka.

with Love
SurabayaDev

Transcript

2. 2015 2016 2018 2020 Graduate Bhinneka Telkom Who is Presenting - Web developer - Backend developer - Frontend developer - Frontend developer Oka Uliandana Work experience
3. What’s on the slides? ✨ Front End Developers What is? How to be? ✨ Going Beyond • Best practices • Better codes • Optimization (Reduce up to 81% app size*)
4. What’s NOT on the slides? LIVE CODING ❌
5. What is Front End developer World Wide Web Javascript Browser war PHP & jQuery Single Page Applications Now
6. What is Front End developer UI design Data Code App
7. How to be a Front End developer HTML CSS JS
8. HTML preprocessor Libraries & Frameworks & Tools Bundler CSS preprocessor Transpiler Task runner Frameworks Webpack
9. true/false function isNegative(number) { return number < 0 ? true : false; } function isNegative(number) { return number < 0; } ✨✨
10. Implicit return const a = data.map(i => { return { name: i.nama, description: i. deskripsi, }; }); ✨✨ const a = data.map(i => ({ name: i.nama, description: i. deskripsi, }));
11. Short-circuit evaluation if (data) { console.log(data); } else { console.log(‘No data’); } ✨✨ console.log(data || ‘No data’); return data && <Table data={data} />;
12. Self-Invoking Functions <div> {isLoading ? <Loading /> : (!data ? <NoData /> : <Content />) } </div> ✨✨ <div> {(() => { if (isLoading) return <Loading />; if (!data) return <NoData />; return <Content /> })()} </div> (() => {...})()
13. Return early function BillingCard({ data }) { ... return data ? ( <div>...</div> ) : null; } ✨✨ function BillingCard({ data }) { if (!data) return null; ... return ( <div>...</div> ); }
14. Dangling comma const a = [1, 2, 3]; const b = { x: 1, y: 1, }; , , const b = { x: 1, y: 1 }; const b = { x: 1, y: 1, z: 1 };
15. object[property] let color = ‘grey’; if (status === ‘success’) { color = ‘green’; } else if (status === ‘failed’) { color = ‘red’; } return <BillingCard color={color} />; ✨✨ const c = { success: ‘green’, failed: ‘red’, }; const color = c[status] || ‘grey’; return <BillingCard color={color} />;
16. Components ✨ ✨ ✨ ✨
17. Max lines: 300 ✅ Focused ✅ Less complex ✅ Easier to maintain ❌ Collaboration conflict
18. flex & grid <div> <h2>Unlimited…</h2> <p>Get unlimited…</p> <img /> <button>Browse package</button> </div> FLEX GRID <div> <h2>Unlimited…</h2> <p>Get unlimited…</p> <img /> <button>Browse package</button> </div> <div> <div> <h2>Unlimited…</h2> <p>Get unlimited…</p> <img /> </div> <button>Browse package</button> </div> <div> <div> <div> <h2>Unlimited…</h2> <p>Get unlimited…</p> </div> <img /> </div> <button>Browse package</button> </div>
19. <div class=”header”> <div class=”nav”> <a class=”link home”>Home</a> <a class=”link”>About Us</a> </div> <img class=”logo” /> </div> Selectors ✨✨ <div class=”header”> <div> <a>Home</a> <a>About Us</a> </div> <img /> </div> .header > div .header > div > a .header > div > a:first-child .header > img
20. Semantics <div class=”header”> <div> <a>Home</a> <a>About Us</a> </div> <img /> </div> ✨✨ <header> <nav> <a>Home</a> <a>About Us</a> </nav> <img /> </header>
21. Variables (Custom Properties) div { --spacing: 32px; } :root { --error-red: #ee3124; } Declare p { color: var(--error-red); margin: var(--spacing) 0; } Use
22. rem :root { font-size: 16px; } p { font-size: 1rem; /* 16px */ margin: 1.5rem; /* 24px */ } :root { font-size: 20px; } p { font-size: 1rem; /* 20px */ margin: 1.5rem; /* 30px */ }
23. 1440px
24. 1080px
25. 1080px :root { font-size: calc(100vw * 16 / 1440); }
26. Modular CSS import styles from ’./styles.css’; function BillingCard({ data }) { return ( <div className={styles.card}> ... </div>; } Code <div class=”_3A8xZR8Xskjatt_YiPGArz”> ... </div> Result <div class=”BillingCard__card”> ... </div> css-loader
27. Optimization Data from Speedtest Global Index
28. Optimization
29. Code-Splitting React.lazy(() => import(‘/Login’)); bundle.js login.js home.js profile.js
30. Minify Before After
31. gzip Compression compression-webpack-plugin bundle.js bundle.gz GZ
32. webp image .jpg .webp
33. Optimization (Final) ✨ ✨ ✨ ✨
34. Optimization (Final)
35. Audit Tools Sonarqube ESlint Lighthouse
36. Team Code Review One reviewer (lead) Peer review
37. Team Code Review small changes ✅ separate merge requests
38. Security & Accessibility
39. Thank You