Blibli.com Pulsa Front End Development

Blibli.com Pulsa

Saya akan membagikan pengalaman saya dalam develop salah satu feature di Blibli.com yakni Blibli.com Pulsa dan improvementnya yakni Blibli.com Data.

Sedikit gambaran awal, sebagian mockup di bisa dilihat di behance.

  1. Technology Stack
    Karena feature Blibli.com Pulsa ini akan dibuat standalone dan diharapkan tidak punya depedency dengan main website existing, maka saya diberikan kebebasan dalam memilih technology front-end yang akan digunakan.

    Untuk Javascript Framework pilihan pertama tentu ada pada AngularJS yang sudah dipakai di main website sebelumnya, pilihan kedua ada pada ReactJS yang memang menawarkan performance lebih baik dari AngularJS.

    Setelah dipelajari dan melihat beberapa flow interaction dari mockup yang diberikan oleh UX Designer, sepertinya akan susah untuk tidak depedency ke main website karena untuk flow seperti login, register, dll masih mengacu pada main website. Mengingat timeline yang juga singkat maka AngularJS akhirnya menjadi pilihan saya diakrenakan experience of usage.

    Untuk CSS main framework saya lebih memilih menggunakan materializecss, karena ingin memberikan sentuhan yang berbeda dengan existing main website, dibantu dengan grid sistem dari Foundation dan juga beberapa library general seperti sweet-alert, tooltipster, animatecss, md5 hash dan bootstrap modal.
    Menggunakan sedikit Storage API dari HTML5 untuk mendukung caching data di sisi client side.

  2. Challenge
    Seperti semua tampilan di Blibli, kita mengimplementasikan layout adaptif dibanding responsive sehingga ada perbedaan experience ketika menggunakan desktop dengan menggunakan mobile device, ini juga berarti bahwa seorang Front-End developer ketika mengerjakan sebuah feature maka dia harus mendevelop paling tidak 2 tampilan layout yang berbeda untuk desktop dan juga mobile web.

    Yang paling berasa dari development Blibli.com Pulsa ini adalah pixel perfect, dimana team UX mulai menggunakan zeplin sebagai tools untuk deliver mockup mereka dimana zeplin menawarkna pixel perfection sehingga front-end developer bisa langsung melihat jarak antar element-nya.

    Kebetuan saat project ini turun, semua Front-End developer yang ada sedang mengerjakan feature masing-masing yang tidak kalah penting sehingga saya harus mendevelop front-end sendiri dari awal hingga akhir, dari design HTML dan CSS sampai membuat interaction flow menggunakan AngularJS.

    Timeline yang terlalu singkat dengan persiapan yang belum matang dari segala sisi membuat development banyak sekali revisi, bahkan dari UX designer pun pada saat mulai project ini belum membuat flow yang 100% clear sehingga dalam perjalannya ada banyak tambal sulam di berbagai titik.

  3. Problem
    Selalu ada banyak masalah dalam proses development yang terjadi, beberapa dalam hal teknis terkait ini akan saya coba sebutkan :

    1. Tooltipster tidak bekerja dengan baik dengan adanya header yang menggunakan fixed position.
    2. Materializcss sebenarnya bukan framework yang cocok untuk custom interface karena agak susah untuk overide dan akan ada banyak tempat yang harus di-overide dari tampilan awalnya.
    3. Browser spesifik untuk safari sepertinya butuh beberapa tricky solving bahkan untuk standard element.
    4. AngularJS yang error ketika di minified karena salah dalam menggunakan Depedency Injection
  4. Performance
    Dilema dari SPA (Single Page Application) adalah render time di awal load, karena kebanyakan SPA memang me-load semua element yang dibutuhkan di awal untuk meningkatkan speed interaction.
    Ini juga dialami oleh Blibli.com Pulsa, dimana sampai tulisan ini di publish masih harus me-load semua element diawal untuk meningkatkan interaction speed.

    Beberapa performance tuning yang saya lakukan dari sisi client hanya sebatas minified dan concating static resource seperti CSS dan Javacsript, sehingga hanya meload satu CSS dan Javascript yang sudah di minified untuk mengurangi request time diawal.

    Pada saat ini di pagespeed untuk mobile site hanya mencetak skor 61/100 bisa dilihat disini.
    Pagespeed Blipulsa Mobile
    Sedangkan untuk desktop site mencetak skor 80/100 bisa dilihat disini
    Pagespeed Blipulsa Desktop
    Next step ini jadi improvement yang perlu saya fokuskan.

  5. Next Step
    Beberapa catatan penting masih jadi PR buat saya, antara lain :

    1. Minimalkan penggunaan CSS menggunakan general class yang bisa digunakan berulang.
    2. Menerapkan above the fold untuk mengurangi render time diawal load
    3. Caching HTML static element agar render time lebih cepat
    4. Mengurangi library yang tidak dibutuhkan.
    5. Memindahkan CSS native ke SASS yang mana sedang dalam proses development.

Demikian sharing dari saya, semoga bermanfaat
mazipan-signature

9 thoughts on “Blibli.com Pulsa Front End Development

    1. ini sebenernya kesalahan yang umum di Front-End developer, yakni mereka membuat css class yang spesifik ke lement tertentu.
      katakanlah seperti berikut

      .pulsa-text{
      text-align: center;
      font-size: 11px;
      color: black;
      }
      

      ini spesifik ke element tertentu, padahal style yang digunakan itu umum dan bakal sering digunakan di element lain.
      maka solusi-nya adalah membuat satu core css yang menampung style-style general seperti ini.

      jadi dengan style general, katakanlah seperti ini :

      .font11{
      font-size: 11px;
      }
      .center{
      text-align: center;
      }
      .black{
      color: black;
      }
      

      sehingga di element tinggal sebutin class yang ingin dipakai, seperti :

      <div class="font11 center black">Test text</div>
      

      teknik seperti ini banyak diadopsi oleh framework css juga kok.

      Like

  1. nunggu perkembangan selanjutnya, saya juga terlanjur pakai js framework dan menghadapi masalah yg mirip2, seperti load semua assets di awal, bahkan kadang sampai bikin browser membeku.

    Like

Be a good reader, leave your comment please.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s