Trentech.id
No Result
View All Result
Login / Register
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
Trentech.id
No Result
View All Result

[Part 1] Ini Dia Skill yang Harus Dimiliki Programmer Masa Kini  - Frontend

22 September 2017
in Learn
[Part 1] Ini Dia Skill yang Harus Dimiliki Programmer Masa Kini  - Frontend
1.4k
VIEWS
Berikan rating

Sebagai CTO, saya selalu dituntut untuk memilih teknologi yang tepat untuk membuat sebuah mobile atau web app. Mulai dari bahasa pemprograman atau framework yang akan digunakan, serta memastikan fleksibilitas jika melakukan scaling dan penambahan fitur. Pemilihan teknologi dan infrastruktur yang digunakan harus lah tepat, ringan, scalable, dan kokoh.

Belajar dari startup-startup atau brand besar yang aplikasi nya digunakan oleh jutaan bahkan milyaran user, mereka menggunakan approach dan bahasa pemprograman “modern”, agar aplikasinya berjalan dengan ringan dan memproses data dengan cepat meskipun traffic nya tinggi.

Sayangnya, banyak dari anggota team saya yang sama sekali belum mengerti, dan semakin mengejutkan ketika tidak ada satupun fresh graduate yang pernah mencobanya ketika saya wawancarai ketika lowker dibuka untuk posisi ini*.

there are some serious problems how our current education system is run today, or this industry rapidly changes?

Frontend Programmer di Industri Digital

Bicara tentang sebuah project, setelah mockup disetujui oleh klien, tentunya tahap awal biasanya dimulai oleh Frontend Programmer, lalu apa aja sih bahasa pemprograman dan skill yang harus dimiliki seorang Frontend Programmer masa kini?

Jika anda tidak pernah bekerja menggunakan salah satu front-end builders (grunt, gulp, webpack), tidak pernah mendengar kata “transpiler” (babel), tidak tau bahwa kamu bisa melakukan serangkaian test pada frontend (Jasmine, mocha, chai) dan otomatis menjalankannya di semua tipe browser (karma), maka anda sedang dalam posisi yang serius, out of date or expired!

Jangan sampai salah sangka, saya sepakat! yang penting adalah hasil nya, tidak perduli bagaimanapun cara anda membangun frontend sebuah aplikasi/web, selama hasil pekerjaan anda berjalan dengan baik, maka itu yang terbaik.

Tetapi tidak ada salahnya menambah keahlian anda, kan? terlebih perusahaan-perusahaan startup/digital kini banyak men-setup Environtment produknya menggunakan teknologi-teknologi baru, sehingga membutuhkan programmer yang faham betul mengenai teknologi tersebut.

Brace Yourself, Semuanya Benar-Benar Berubah

var pada Javascript telah mati? Kita harus menggunakan standar EcmaScript let dan const sekarang!?

CSS kini sudah bisa menggunakan variabel, nesting, scoping dan custom selectors. Preprocessors seperti Sass dan Stylus telah ditinggalkan?, digantikan PostCSS !?

Sudah bisa Grunt? Oh! kamu harus mencoba Gulp — Eh jangan! coba Webpack!

Baru saja belajar AngularJS? Wah, AngularJS sudah berubah semua sejak versi 2.0 (Angular tanpa JS). Tunggu, tidakah sebaiknya kita menggunakan React dibandingkan Angular? tapi pernahkah mendengar Aurelia atau JSBlocks?

Begitu kira-kiranya kebingungan para Frontend Programmer ketika sebuah framework, tool, atau teknik baru diperkenalkan, lebih banyak kebingungan daripada tepuk tangan!

“Bagaimana semua pekerjaan kita dapat selesai, jika semuanya terus berubah?”

Sayangnya, teknologi akan tetap terus berubah, suka atau tidak suka. Akan selalu ada orang yang melakukan inovasi untuk melakukan sesuatu dengan efisien dan cepat.

Skill-skill Modern Untuk Frontend Programmer

Saya sebut “modern”, karena tools dan approach yang digunakan tidak seperti programming umum yang biasa dipelajari di kampus, karena kampus hanya mengajarkan basic dan logic. Misalnya apa saja?

1. Client Side Rendering

Umumnya, browser menerima HTML dari server dan merendernya. Saat user menavigasi ke halaman lain, halaman browser akan melakukan refresh dan server mengirimkan HTML baru untuk halaman baru. Ini disebut server-side rendering.

Namun dalam pemprograman modern, client-side rendering digunakan sebagai gantinya. Browser memuat halaman awal dari server, beserta script dan stylesheet yang dibutuhkan untuk keseluruhan aplikasi/website. Saat user membutuhkan data baru, halaman tidak perlu di refresh. Data yang dibutuhkan untuk halaman baru, biasanya dalam format JSON, diambil oleh browser melalui script AJAX ke server (kita mengenalnya dengan sebutan REST API). Browser kemudian secara dinamis memperbarui content halaman menggunakan Javascript DOM Manipulation, yang telah disiapkan sebelumnya ketika memuat halaman awal.

Kenapa harus seperti itu? bukankah data yang disiapkan untuk AJAX juga diproses secara server-side? lalu apa bedanya? hanya biar keren gitu halaman gak loading? Nah, data yang disiapkan menggunakan API untuk dipanggil menggunakan AJAX ini, tidak benar-benar “server-side” dari database langsung. Kadang ia adalah “Memory” atau “Index”, jadi data yang kita terima dalam format JSON, sudah pernah dirender sebelumnya.

Biasanya ini diterapkan di web e-commerce besar, ketika user A mencari data untuk kategori X misalnya, maka user B yang berikutnya, ketika mencari data untuk kategori yang sama, data yang ditampilkan adalah hasil render dari user A sebelumnya.

Bukankah ini “Cache” istilahnya? kurang tepat, bagaimana dengan web pembelian tiket online, yang harganya terus berubah-ubah? kan tidak mungkin menampilkan cache. Mereka menggunakan ElasticSearch namanya, dan ElasticSearch ini output formatnya JSON. Sehingga AJAX adalah salah satu cara untuk mengambil dan memanipulasi data dengan format ini.

Kesimpulannya, banyak desakan agar Frontend Programmer membangun web/app menggunakan approach Client-Side Rendering, sehingga mudah dicolokin ke API yang telah dibuat oleh Backend Programmer.

2. HTML dan CSS Dirender Menggunakan Javascript

Kalau tadi hanya data yang dirender, sekarang HTML dan CSS itu sendiri yang dirender menggunakan Javascript, kenapa harus seperti itu? bukankah pure HTML saja sudah sangat ringan?

Selama bertahun-tahun, Frontend Developer diajari bahwa penulisan coding yang baik adalah HTML, JavaScript dan CSS ditulis secara terpisah. Tetapi tidak hari ini, justru sebaliknya! HTML dan CSS ditulis di dalam Javascript.

Itu adalah approach yang diajarkan oleh Facebook dengan Frontend Frameworknya bernama React. Awalnya ini seperti ide gila, tapi setelah mencobanya, sebenarnya tidak separah kedengarannya.

Approach seperti ini diperlukan agar dapat berjalan dengan baik pada server stack yang saat ini sedang naik daun, NodeJS. Selain itu, membuat tampilan web/app lebih scalable dan dinamis jika suatu saat dilakukan perubahan. Dan HTML terlalu kaku untuk itu.

React mungkin bukan framework frontend tercepat saat ini, masih ada Angular, Ember, Vue, Cycle, dll diluar sana. Namun React merupakan salah satu framework (library) yang banyak dipakai para developer saat ini. Sehingga lebih mudah mencari referensi jika kita mengalami kendala.

Dan ketika develop Frontend menggunakan React, ada baiknya menggunakan Redux, untuk State Management. Akan saya jelaskan lebih lanjut dalam kesempatan lain.

3. Testing dan Linting

Linter adalah istilah tools untuk menganalisa dan menemukan bugs pada kode, dan Linting adalah istilah ketika menjalankannya.

Karena Frontend dibuat menggunakan banyak Library dan Javascript, maka testing ini bukan sekedar mencari bugs pada tampilan saja, tetapi lebih kepada apakah frontend sudah memanggil API dengan benar dan efisien? Apakah Callbacks yang dilakukan sudah benar?

Terlebih ketika bekerja di startup / perusahaan digital yang produk nya berupa aplikasi, testing itu harus, jika tidak bisnis mereka akan terganggu.

Ada Jest, tools yang digunakan untuk testing library yang kita gunakan dalam frontend. Dengan Jest, kita bisa mengetahui library apa saja yang terload ketika sebuah halaman/action dipanggil, dan apakah ada error disana. Jika mau lebih asik, kombinasikan dengan Enzyme, sebuah tools dari Airbnb.

Untuk linting kode-kode Javascript, Frontend Programmer biasanya menggunakan ESLint, karena console pada browser saja tidak cukup untuk itu. Apa sebabnya? Terkadang kodingan javascript yang kita tulis, berjalan dengan baik dan pada console browser tidak ada error, tetapi ESLint akan memastikan apakah kita sudah mendeklarasikan variabel dengan benar dan sesuai standar ES2015 (Ecma Script) atau jangan-jangan kita menggunakan code yang sebenarnya sudah deprecated, jalan sih tapi tidak dianjurkan digunakan.

Begitu juga ; (titik koma), kadang dalam beberapa script bisa berjalan meski tidak mencantumkan titik koma (serius) pada ending codingan, tetapi ketika script tersebut di minify, yang terjadi adalah error.

Bagaimana Selanjutnya?

Oke, lalu bagaimana dengan Frontend Programmer yang masih belum mengerti itu semua diatas? haruskah sekarang juga meninggalkan Jquery dan menggunakan Angular? atau menggunakan React daripada bootstrap?

Jawabannya tidak! seperti yang saya tegaskan diatas, yang penting adalah hasilnya. Tidak apa-apa sementara menggunakan cara yang anda pahami saat ini untuk mengerjakan proyek-proyek yang masuk, tetapi ada tips agar tidak ketinggalan tergerus oleh perkembangan teknologi;

  1. Perbanyaklah membaca berita dan artikel mengenai perkembangan dunia programming saat ini.
  2. Buatlah sebuah Side Project menggunakan framework, tools dan approach terbaru seperti diatas. Sehingga anda mengetahui batas dan kemampuan anda.
  3. Selipkan sesuatu yang baru, pada setiap project anda. Meskipun hanya menampilkan data tabel menggunakan API, atau menggunakan Javascript untuk membuat halaman Form.
  4. Ikut les / workshop online atau offline yang khusus membahas framework baru, datang saja dan dengarkan. Diterapkan atau tidak, bisa paham atau tidak, itu urusan belakangan.

Yup! Itu saja.. industri digital memang bergerak sangat cepat, dan itu dikarenakan setiap hari ditemukan cara yang lebih baik dan efisien. Dan jika Anda selalu mengasah kemampuan menggunakan skill — skill baru sedikit demi sedikit, Anda akan baik-baik saja — jangan khawatir expired! [cp

/ap]
Tags: belajar kodingfrontendmenjadi programmerprogrammerprogrammer masa kiniskill programmer
Previous Post

Kamu Harus Tau, Kumpulan Aplikasi untuk Memantau Keberadaan Orang Terkasih

Next Post

8 Tips untuk Menumbuhkan Rasa Saling Percaya Saat Pitching dengan Investor

Angga Permana

Angga Permana

Maju terus sampai TUNTASSS!

Related Posts

coding sambil berdiri

Inilah Alasan Mengapa Seorang Programmer Jangan Terlalu Lama Duduk

19 April 2022
1.5k

Kemampuan untuk berpikir kreatif merupakan salah satu kemampuan yang harus dimiliki oleh programmer manapun. Dengan memiliki kemampuan ini, sang programmer...

film programmer

Programmer Wajib Tonton Film Ini

12 April 2022
1.6k

Dunia pemrograman memang ibarat sebuah teka-teki yang membuat banyak orang penasaran. Tidak sedikit orang yang mencintai dunia ini, namun tidak...

Pengorbanan Seorang Programmer, di Balik Celana Pendek dan Berangkat Siang

Pengorbanan Seorang Programmer, di Balik Celana Pendek dan Berangkat Siang

9 April 2022
1.5k

Bangun lebih siang dari pekerja pada umumnya, berangkat ke kantor ketika jalanan sudah sepi, menggunakan kaus dan celana pendek ke...

Please login to join discussion

Terpopuler

  • Ini Dia 6 Kesalah Pahaman tentang Profesi Programmer

    Alasan Mahasiswa IT Harus Bisa Coding

    117 shares
    Share 47 Tweet 29
  • 8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    915 shares
    Share 366 Tweet 229
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    326 shares
    Share 130 Tweet 82
  • Inilah 15 Skin Paling Keren di Mobile Legends

    162 shares
    Share 65 Tweet 41
  • Upgrade XAMPP? Beginilah Caranya

    229 shares
    Share 92 Tweet 57
  • 5 Pokemon Terkuat dan Terfavorit

    158 shares
    Share 63 Tweet 40
  • Mengenal Lean Product Development dan Berbagai Keunggulannya

    133 shares
    Share 53 Tweet 33
  • Platform MoonXBT Membantu FTX dengan Likuiditas Tinggi

    113 shares
    Share 45 Tweet 28
  • Trik Cara Main Game Berat di PC Kelas Bawah

    117 shares
    Share 47 Tweet 29
  • Apa Saja Kemudahan yang Ditawarkan Warung Pintar?

    139 shares
    Share 56 Tweet 35

About . Contact . Partnership

Trentech.id adalah situs yang menyajikan konten tentang startup, bisnis, game, event, hingga informasi pekerjaan. Trentech berusaha memberikan konten yang berkualitas untuk para pembacanya agar dapat menjadi rujukan utama mengenai dunia teknologi pada khususnya. Tim trentech terdiri dari orang – orang yang berkompeten dibidangnya, dan akan selalu mendukung karya – karya terbaik anak bangsa dengan memberikan kesempatan seluas-luasnya untuk para startup agar dapat publish karyanya di trentech.

Trentech ID

  • About
  • Contact
  • Partnership
  • Panduan Penulis
  • Privacy Policy
  • Sitemap

Tools

  • Harga Crypto Terbaru
  • Cek Ongkir
  • Cek Resi
  • Cek Domain
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
Login / Register

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • Login
  • Sign Up
Forgot Password?
Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.