Mock interview - Twitter system design (frontend)

alright teman-teman Jadi sekarang kita akan bahas another system design tapi kali ini sistem desainnya front and pertanyaan yang sama seperti pertanyaan sistem desain sebelumnya quicks how to design Twitter tapi Space ini bakal tentang interview front and dan spesifikasi front and interview karena kalau kita misal pakai view atau pakai anguler atau pakai ini vanilla [Musik] interviewnya jadi ini Space saya akan makin interview untuk sistem-sistem front and By the way sistem desain ini membuat saya mendapatkan over 4 digit Jadi cukup interesting untuk kita bahas dari awal sampai akhir tapi yang kemarin saya overnya untuk kerja kreatif sih

bukan untuk riak Jadi mungkin agak sedikit berbeda tapi esensinya kayak video ini bisa membawa kita untuk mendapat gaji 4 digit casting about front interview adalah sistem desainnya mungkin tidak akan terlalu heavy gitu dibandingkan dengan back end dan dibandingkan dengan Android karena jujur link tidak terlalu banyak yang bisa dibahas di Riyad itu di front and react tapi jatuhnya kita mungkin akan membahas lebih banyak use case lebih banyak requirement dan nanti sebagai front engineer kita bakal ada lebih banyak interview yang tentang javascript fundamental dan rear fundamental untuk possibly data structures dan algorithem jadi interviewnya nanti sebagai front

engineer bakal lebih banyak gak cuma kayak coding dsa coding algori brosur data dan sistem design kayak dibacond kalau sebagai front engineer codingnya ada 3 algoritma restore data javascript fundamentals dan habis itu baru sistem design jadi kayak sistem desainnya expected akan lebih mudah kuat requirement jadi eh sorry kita Start dari [Tepuk tangan] jadi sama seperti kemarin gitu kita akan tulis se user I can go to home page bisa lihat homepage and see Last of pause from People itu terus habis itu sebagai user bisa follow unfollow habis itu kemarin tuh ada apa lagi ya mungkin kita akan

nambahin 2 use case lagi karena agen bisnis like front and interview jadi kayak bakal lebih banyak requirementnya karena tidak akan terlalu banyak membahas bagian yang database dan bagian scalability jadi kita bakal lebih banyak membahas case jadi saya akan nambahin 2 lagi toit and user jadi bisa like bisa retweet mungkin Teriak aja deh Jadi bisa like Oke jadi aja agak Scroll jauh deh sekarang kita lanjut ke novance nah non functional requirementnya front and itu akan berbeda dengan non-ponsor recorn yang ada di bahas kemarin kalau nonton itu kita akan ngomong ini konsistensi tolerance eee bagian front end

itu yang akan dibahas tuh nggak terlalu banyak gitu yang paling pertama yang paling common adalah offline support Jadi apakah ini misalnya website down gitu Apakah kita masih bisa nge-pose Apakah kita masih bisa ngecek querynya gitu bisa kita refresh kayak kita lihat barang-barang yang sudah ada di pos sebelumnya atau tidak itu habis itu apakah websitenya akan responsif jadi web mobile responsif desain ini artinya kayak kalau screen-nya dikecilin dibesarin itu apakah kayak ui-nya bakal ngikutin dengan baik atau kayak apa namanya nanti kita render mobile design in desktop kayak bisa-bisa aja tapi nggak optible dan apalagi kebalikannya lebih

parah kalau desktop design masuk di render ke mobile itu bentuknya jadi ampas banget nanti gitu Jadi jangan sampai ke arah sana terus hal yang lain bisa kita lakukan adalah localization jadi Apakah kita bakal lock live bareng-barengnya kayaknya ini nggak terlalu penting awal-awal jadi kita nggak usah ngerjain locations terus hal yang penting lainnya adalah yang akan berhubungan dengan front and which is akan berhubungan dengan How do we connect with the server adalah kayak kita mau letensinya kenceng sehingga berarti kita harus ngecek barang-barangnya Real Time which in the catch kita eventure harus pakai web socket atau kita

harus polling cepet banget atau sebenarnya lisensinya nggak papa agak lama karena ini social media dan bukan cat at gitu sepertinya tidak apa apa kalau misalnya ada latensi gitu kayak tuh tuh 5 second jadi kita akan Out for lighting 24 second seperti ini Artinya kita bisa pakai polling seperti biasa nggak perlu pakai web socket Which managementnya mungkin bakal lebih gampang sih kayaknya gitu aja buat non-fase requirement signifikan lebih simple daripada sistem desainnya bukan karena front end itu lebih mudah tapi karena bakal diakses menggunakan interview yang lain juga akan jauh lebih mudah karena misalnya gini satu miliar

user dan 100.000 user nggak akan ada bedanya gitu untuk sebuah up yang sama sebuah app yang mengerikan gitu ya di front itu lebih ke arah kalau data yang mau kita display itu banyak ya jadi Imagine kalau kita mau bikin trading app gitu kan kayak live streaming yang kayak ada data-data dari ticker-stikernya di di ihsg di trading-nya di nasdak dan kawan-kawan kan ada banyak Nanti dan kita harus mengupdate terus-terusan itu bakal mengintech How do you design the front and gitu Jadi tapi number of use Terus yang memakai nggak ada hubungan yang tidak akan mengganggu tidak akan

ada impact terhadap desain warna kita jadi kuantitas analisis yang diperlukan itu sangat berbeda dengan apa yang dilakukan lebih penting adalah berapa banyak Data yang akan display di Twitter will Biasanya kita akan paling nge display kayak 100 + 2 display terus habis itu yang akan kita cek lagi adalah each content mungkin 4kg Hubungannya apa di sini hubungannya adalah berapa banyak yang akan kita butuhkan untuk local storage habis itu habis itu adalah media -media size mungkin 1 MB itu hubungannya apa di sini hubungannya adalah kalau medianya kita simpan di local ini bakal kayak gimana nih Tapi media

sosial tidak akan terlalu penting untuk web dan untuk desktop bakal penting untuk Android dan iOS dan ledakan terlalu penting di sini jadi saya tidak perlu media size karena media saya kemungkinan besar nggak akan kita cashflow mungkin bakal kita [Musik] Which is to display dan ada 4 Berarti cuma ada 4 dikalikan 100 Which means kita perlu ngestor 400 KB of data gitu jadi kita nggak perlu menggunakan any kind of special strategy untuk ngesource ini kayak Build in bakal Oke mungkin paling kita problemnya adalah kita harus clean storage daily gitu mungkin kita harus impromen samakan of Lee

cash implement of karena sizenya udah kecil gitu kayak 400 lowbat doang mungkin kalau nyampe 1GB itu kan kayak agak ngeri ya tapi kalau cuma 4G mungkin kita saja terus setiap hari ketika kita buka kita Clean Up sih kita bisa kita sudah maaf requirement dan numbers very quitly for and interview So let's get moving untuk High Level design nya agak berbeda dengan baik kan untuk sekarang kita start dengan user seperti biasa and the user will interact router kalau nggak salah habis itu kita bakal Oke gimana app ini bakal ada bakal go to router jadi ini entar

kita bakal ngimplemennya pakai spa ya single page ke router di mana router ini bakal membuka beberapa page karena kita itu ada homepage dan mungkin ada one page for the tweet self Jadi mungkin kita bagi dua router aja 3 deh dia ada home Dimanakah kita bakal dapat list of tweet habis itu bakal ada single tweet supaya kita bisa lihat reply itu apa aja oke habis itu yang terakhir adalah kita bisa kompos atau create oke [Musik] jadi ini homepage ntar jatuhnya tinggal ngelihat list view mungkin homepage terakhir kali ya agak susah composer itu bakal basically mungkin something

like gini gitu wes appropper apa namanya callback kan kalau gitu submitnya nanti bakal kita langsung dari direct aja ke sebuah nah ini ada dua opsi kan kalau di sini kita bisa composernya bakal di eksekutif di komposernya atau kita akan fire events yang artinya yang akhirnya bakal diproses di sebuah Vlog Store Sepertinya bakal lebih menarik kalau kita pakai flat Store gitu Kenapa karena kita expect sistemnya ini bakal menjadi besar dan bakal bisa direus di satu datanya bakal bisa diurus di komposer di tweet dan di home sehingga saya akan leaning menggunakan flux Store dan flak Store yang

akan saya gunakan Insert of menggunakan redox atau pakai zaston saya akan langsung aja lempar ke Apollo jadi kita relay on Apollo sebagai Boss di network layernya buat itunya juga jadi sebagai Network layer mutation mutation call local storage-nya bukan logonya dan menjadi flagstore yang akan tolak with the composer so kita akan langsung pakai Apollo Disini kebaikan dimana Apollo ini mungkin bakal punya list of tweet dan each individu apa namanya sebenarnya ini bakal direpresentasikan menggunakan grafik yang sama gitu nanti bentuknya mungkin bakal seperti ini gitu kan [Musik] nantikan list of tweet Kan biasanya bentuknya kayak gini nih

itu kan terus tapi kalau di bentuknya grafielnya bakal kayak gini twitch terus nanti bakal ada individual tweaknya gitu gitu terus aja ini agak empressed juga berarti kalau kita milih Apollo berarti kita memilih Gravity OL kenapa kita memilih grapql atau pakai Jr sebenarnya race FPI juga nggak masalah sih cuma saya suka pakai Apollo karena Apollo ini kayak udah komplit gitu dan saya pakai grapql by complete adalah kayak dia menggabungkan antara flat Store menggabungkan antara lokal apa namanya memori storage dan juga apa namanya sebagai Craft QL connector kebaikan Network layer lah gitu alternatif ini kita bisa pakai

race kalau pakai rest IPS semua harus diimplemen manual dan kita harus nge-stage barangnya satu-satu of speed buat kayak speed of implementation Sepertinya bakal take time dan apa namanya dan Network mungkin nggak terlalu efisien gitu compare to Kalau interview yang pertama grafi QL dan pakai rest yang kedua adalah antara flak Store atau kayak kita implemen manually di dalam Store ini pakai state atau pakai konteks dan faktornya pun saya juga ada bisa pakai redux sustain atau pakai bawaannya Apollo Di Sini Oke deh with By the way kayak kita bisa pakai Z10 dan Apollo the sametime Mereka cuma

saya In this case sepertinya nggak masalah pakai Apollo aja nggak usah pakai bawaan yang lain That Should help with the composer I think composer nanti bakal memberikan datanya adalah user ID atau autokan deh yang kita harus Regret ini bakal di Store di mana terus habis itu the content itself konten gampang bisa langsung dapat dari input change-nya ini terus autoken di kontennya ini dan nanti kita akan mengambil mutation call saya tidak terlalu ingat terus dengan kita menggunakan cara kayak gini kita bakal kita bakal juga melakukan mutations dan juga dapat data dari tweetnya yang bakal di Store

di Apollo dengan mudah kok sekarang mungkin kita handle single tweet dulu karena itu mungkin lebih mudah jadi single tweet again similernya bakal manggil ke Apollo dengan menggunakan graf ql-nya ini jadi Craft QL nya ini kita bakal ngambil fragmennya ini fragmennya ini sebagai apa namanya untuk mendapat single quick dan tweak itu bakal konten jadikan tweet itu ada profile picturesnya berarti perlu ada user di mana user itu ada profile dimana ini bakal adalah query agency image Kenapa saya bikin kayak gini supaya kita nge-vage datanya nge-face image-nya dengan size yang benar Jadi kita jangan kayak ngambil apa namanya

opsi yang lain Lagian adalah menggunakan kayak ini [Musik] small urld url gitu kan will not skill kalau ketika kita punya banyak dimensi kita nggak support banyak device gitu jadi lebih baik kita menggunakan Dynamic calls Which is image terus kayak kita ngasih tau ke server eh si profile picture url ini di request dari device West and device nanti baru dapat url nya apa Oke and this is karena kamu bisa melakukan semua hal ini dalam satu call dari client X ya mungkin dari backhand-nya bakal ribet cuma mindsetnya terlihat simple langsung habis itu tweet itu perlu user jadi

jadi profile picturesnya dari usernya perlu namanya itu kan Kayaknya udah gitu aja Oh mungkin ada link to profile atau sebenarnya juga bisa di compose dari klient tapi just in case kita ada ganti-ganti gitu mungkin kita profitnya habis itu dari setelah usernya sudah ada kita ada kontennya terus konten bakal mengandung dua hal which the text dan media ini bisa mungkin ada bisa ada image bisa ada video sehingga saya bikin media ini bisa ada teks bisa ada url sehingga saya akan membuat dia agak lebih generik jadi kita kasih URL di sini aja atau mungkin kita bisa bikin

multiple Quest dimana Jadi kita bisa bikin satu [Musik] kelas media dimana kelas media itu bakal mengimplemen multiple things multiple things support image salah satunya mungkin bisa nol kalau misalnya Barangnya nggak ada Oke So This will help us get the tweet kita ini dengan cara ini kita bakal mendapatkan single tweet dan sekaligus juga membantu kita untuk ngesolve gimana kita akan mendapatkan list of twice jadi Dengan ini kita bisa dapat ID performa picture url name link konten kita cek kembali kita jadi kita bisa kompos atlet ini udah warna hijau post atlet udah beres reply Belum kan replayer

tweet Oke kita coba solve dulu ya can reply ini artinya kayak retween itu bisa kita kompos dan reply dan habis itu kita juga bisa pertama di sini kita perlu ada apa namanya kalau mau reply itu ada Karen tweak ID gimana tipe key default-nya 0 kalau default-nya 0 artinya dia adalah new tweet kalau dia ada id-nya itu artinya dia reply Masya Allah oke di sini kita bakal perlu masukin parent with Oke so that soft di the replying to a tweet dan juga terus di sini aku juga perlu masukin Apakah ini parent with id atau parent aku

akan nulis parent aja dan ini bakal menjadi fragmen ini adalah fragmennya of tweet gitu artinya kayak kalau misalnya dia nemu departicular ID langsung aja ngecek dari apa namanya langsung aja diambil itu terus follow unfollow follow unfollow follow unfollow itu bakal ada mutusin call jadi ini kopi aja Tara terus itu bisa dilakukan di mana aja bisa dilakukan di home tweet composer nggak masalah karena yang penting adalah kita tidak perlu konten tidak perlu ini cuma perlu tweet id-nya aja like terus ini tinggal tweak easy Kalau unlight gimana ya mungkin kita pakai satu IPA yang sama aja habis

itu is like gini guest default-nya adalah true kalau is like maka dia bakal nge-like that particular tweak kalau likenya is like sama dengan false oke terus kita like and like and dan aku bakal unfollow juga menggunakan mutusin kalau yang sama tinggal ke arah follow ID ya Siapa yang mau di follow Oke dan ini ntar Bakal dapet dari datanya follow Id ini bakal dapat dari mana datanya follow Id ini bakal dapat dari [Musik] dari The Series Oke composer Mari kita cek lagi requirement kita ya kita follow like tweet udah beres follow unfollow udah beres oke follow

harus unfollow juga oke kalau is follow sama dengan true Artinya kita ngefollow kalau di sekolah sebagai kita mau unfollow gimana di handle di bacon-nya nggak peduli Oh right terus oke kita harus menghandle kita sekarang handle homepage dan kita harus handle offline support oke untuk handle homepage berarti kita just me to go up Little bad Which is insert of ngeceklik kita bakal ngecek Twist di mana twitch itu adalah query gen sweet dimana kita perlu berapa parameter mungkin office kita ada atoken Dimana ada Oh atoken terus ada pgination juga [Musik] [Musik] ya Kayaknya gitu Oke biarkan ini

Jadi sebenarnya kita bisa masukin device with dan device ini cuma biar saya kan nggak nggak berguna buat urusannya homepage berguna ketika ketika kita jadi kita nggak usah masukin device device high in the square alright terus homepage again tinggal nge-fans ke Apollo gampang dengan query yang sama salah bro oke terus nanti ketika barang ini ke update Apollo bakal update ke sini dengan menggunakan [Musik] pertama adalah gimana kita nge-handle 100 Oke jadi kita centang dulu ya di drive pertama adalah gimana kita nge-handle 100 list of Tweets ini kan Artinya kita nggak bisa render statusnya langsung langsung gitu

kayak tiba-tiba 100 langsung kayak keluar gitu yang terjadi adalah entar Chrome browsernya bakal Crush atau mobile app-nya bakal Crash kita harus nge-load-nya tiap 5 atau 10 atau 20 gitu Which means ketika rendering kita perlu menggunakan atau pakai infinix Pro So In My case karena Twitter ini kita mau bikin infinix scrolling saya akan mengimplemen saya akan menggunakan Infinite Scroll library yang gimana dia bakal menghandle renderingnya homepage jadi entar ada render jadi kayak gitu dimati data renderingnya bakal Apollo di atasnya So that's gonna be quotes oke Oke sekarang kita perlu ngesolve letensi problem yang 5 second Which

means kayak kita perlu tahu kayak seberapa sering kita ngekol Apollo jadi kita bisa pakai polling atau bisa pakai push dari servernya yang paling bagus sih kayaknya sih pake query is mounting tapi kayaknya kalau nggak salah grave to L itu bisa bikin namanya subscription kalau bener nggak sih ada query ada mutation ada subscription Oke mengganti ini jadi query menjadi subscription responsive design itu harusnya lumayan gampang tinggal kita pakai apa namanya [Musik] yang saya suka dari Apollo adalah dia bisa melakukan offline support dan offline support itu sebagai J2 query-nya buat nge-store kalau di atas storage buat masalah

lokal lokal storage Sorry offline support dari apa namanya query itu bakal di handle sama local apa namanya reaktif variabels atau local storage nya Apollo Sedangkan untuk mutation bisnis the problem kayak gimana kita nge handle mutation call yang saya barusan baca-baca sih dia kita bisa menggunakan apollowing retract sama Apollo Link untuk handle mutation call buat offline support bargen like for web This is not that important buat mobile apps gimana Kayak orang biasanya ketika offline ya mereka masih mau berulah-ulah gitu This is gonna be more important Oke I think kita sudah cover semuanya jadi masalah local storage

itu dari bahas semua number bisa dibahas offline support sudah saya dibahas again cukup simple dibandingin sama bekken yang kayak lebih banyak elemennya dan di sini saya again agak curang karena saya menggunakan segala macam fiberry yang disediakan oleh Apollo us Gunanya buat apa itu yang lebih penting sih jadi saya tinggal perlu ngebahas bagaimana kita membuat Twitter tapi dari sisi Android Which is gonna peach similer dengan front and cuma bakal lebih involved baterai consumptions dan lokal offline support Oke deh jadi gitu saja dari saya sampai ketemu lagi di next video