Penawaran untuk Anda

Anda dapat meminta proposal penawaran sebelum memulai order. Penawaran terbaik akan kami kirimkan ke alamat email Anda.

Nama

Email

Telepon

Anggaran

Catatan / Rincian Kebutuhan

Produk yang Anda Inginkan

Berkas (Opsional)

Unggah berkas untuk informasi tambahan, maksimal 5MB, format: *.zip, *.rar, .jpg, .png, .docx, .xlsx, .pptx, .txt, atau .pdf

Satu dekade yang lalu, membangun frontend adalah pekerjaan yang sederhana. Anda cukup bekerja menggunakan HTML, CSS, dan JS. Apa yang inginkan? Sebuah halaman web untuk bisnis atau sekedar aplikasi kecil untuk tugas kuliah? Asalkan Anda cukup paham konsep dari bahasa-bahasa tersebut, pekerjaan bisa selesai dalam beberapa hari.

Namun seiring dengan berjalannya waktu, kebutuhan untuk membangun frontend yang cantik, interaktif, sekaligus terintegrasi dengan berbagai API semakin meningkat. Ditambah lagi ukuran proyek frontend semakin besar dan dikerjakan oleh tim yang berisi banyak orang. Dibutuhkan suatu kerangka kerja yang solid untuk mendukung proyek frontend, kalau Anda tidak ingin proyek Anda menjadi mimpi buruk.

Untuk itulah frontend framework hadir. Framework menawarkan berbagai fitur untuk membuat tampilan dengan cepat sekaligus memberikan aturan yang solid untuk bekerja. Berikut kami hadirkan 10 framework yang populer digunakan untuk membangun frontend.

Angular

Angular adalah framework dan platform pengembangan untuk membuat aplikasi satu halaman (single-page apps) yang efisien dan canggih. Angular membantu programmer untuk membangun fitur dengan cepat dengan template yang deklaratif dan sederhana. Mempelajari Angular akan lebih menantang karena menggunakan bahasa Typescript. Akan tetapi karena Typescript adalah superset dari Javascript, Anda tetap bisa menggunakan Javascript di dalam Angular. Angular didukung oleh Google sehingga menjadi salah satu framework yang paling populer.

src/app/person.ts
export interface Person { id: number; name: string; }
src/app/person/person.component.ts
import { Component, OnInit, Input } from '@angular/core'; import { Person } from '../person'; @Component({ selector: 'app-person', templateUrl: './person.component.html', styleUrls: ['./person.component.css'] }) export class PersonDetailComponent implements OnInit { @Input() person: Person; constructor() { } ngOnInit() { } }
src/app/person/person.component.html
<div *ngIf="person"> <h2>{{person.name | uppercase}} Details</h2> <div><span>id: </span>{{person.id}}</div> <div> <label>name: <input [(ngModel)]="person.name" placeholder="name"/> </label> </div> </div>

ReactJS

Secara singkat, ReactJS adalah framework yang digunakan untuk membangun interface. Framework ini memiliki tiga karakter utama. Karakter pertama adalah deklaraitf yang berarti sintaks ReactJS mudah dipahami. Karakter kedua adalah berbasis komponen yang berarti aplikasi ReactJS dibagi menjadi berbagai komponen yang dirangkai menjadi satu aplikasi utuh. Karakter ketiga adalah belajar sekali dan tulis di mana saja, ini berarti kode yang ditulis menggunakan ReactJS tidak hanya untuk aplikasi berbasis web, namun juga dapat di-render untuk aplikasi mobile. Javascript sangat dominan di dalam ReactJS, bahkan tag HTML pun ditulis di dalam fungsi Javascript. ReactJS didukung oleh Facebook sehingga menjadi salah satu framework yang paling populer.

class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, document.getElementById('hello-example') );

Vue.js

Vue.js adalah framework progresif yang digunakan untuk membangun frontend. Core dari Vue.js dapat digunakan sebagai library biasa, sehingga dapat ditambahkan ke dalam halaman web yang sudah ada. Cara penggunaan seperti ini mirip seperti jQuery. Di sisi lain, Vue.js juga dapat digunakan layaknya sebuah framework secara penuh untuk membangun aplikasi halaman tunggal (single-page applications). Tidak seperti Angular dan ReactJS, bahasa yang digunakan di dalam Vue.js adalah HTML, CSS, dan Javascript yang ditulis secara independen layaknya halaman web pada umumnya. Jika Anda telah menguasai ketiga bahasa tersebut, Anda dapat langsung mencoba Vue.js untuk proyek frontend Anda.

<template> <div id="wrapper"> Halo {{ userUppercase }}! </div> </template> <style lang="scss" scoped> #wrapper { font-weight: 700; } </style> <script> import Helpers from '@/assets/js/helpers'; export default { name: 'User', data: () => ({ user: "John", }), computed: { userUppercase(){ return this.user.toUpperCase(); }, }, methods: { }, }; </script>

Aurelia

Aurelia adalah frontend framwork modern untuk membangun aplikasi browser, seluler, dan desktop. Aplikasi Aurelia dibangun berdasarkan berbagai komponen yang dirangkai bersama. Setiap komponen terdiri dari class yang ditulis dalam bahasa Javascript atau Typescript beserta dengan template HTML yang sesuai. Core dari Aureliaditulis dalam ECMAScript dan dirancang untuk mengikuti standar DOM yang berlaku.

hello.js
export class Hello { constructor() { this.firstName = 'John'; this.lastName = 'Doe'; } sayHello() { alert(`Hello ${this.firstName} ${this.lastName}. Nice to meet you.`); } }
hello.html
<template> <input value.bind="firstName"> <input value.bind="lastName"> <button click.trigger="sayHello()">Say Hello</button> </template>

Mithril

Mithril adalah framework untuk frontend yang modern, kecil, dan cepat untuk membangun aplikasi halaman tunggal (single-page applications). Penggunaan framework ini sangat sederhana layaknya menggunakan library Javascript pada umumnya seperti jQuery. Namun Mithril tetap menyediakan berbagai fitur seperti routing dan XHR. Keunggulan lain dari Mithril adalah kesederhanaan API dan penggunaan bahasa Javascript.

<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/2.0.4/mithril.min.js"></script> <title>Hello World!</title> </head> <body> <script> m.render(document.body, m('h1', 'Hello World!')) </script> </body> </html>

Ember.js

Ember adalah framework frontend yang didesain untuk mengerjakan pekerjaan berat yang biasanya dikerjakan oleh programmer, sehingga programmer bisa berfokus untuk membangun fitur dan tatap muka. Setiap tahun, pengembang Ember berkumpul di sebuah konferensi yang bernama EmberConf. Konferensi tersebut adalah tempat bagi mereka untuk membahas cara untuk meningkatkan framework, berbagi pengetahuan, dan berbagi praktik terbaik dalam menggunakan Ember.

app/components/messages.js
import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; export default class MessagesComponent extends Component { messages = [ { username: 'John', active: true, content: `<p>Hey Adam!</p>` }, { username: 'Adam', active: true, content: `<p>Hello, John.</p>` } ]; }
app/components/messages.hbs
<div class="messages"> {{#each this.messages as |message|}} <Message @username={{message.username}} @userIsActive={{message.active}} > {{{message.content}}} </Message> {{/each}} <NewMessageInput /> </div>

Svelte

Svelte adalah framework yang baru muncul. Framework ini berfokus pada kecepatan dan kesederhanaan. Karena terhitung baru, framework ini belum memiliki pengguna sebanyak framework lainnya. Namun diperkirakan framework ini akan menjadi populer dalam tahun-tahun ke depan.

<script> let count = 0; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button>

Backbone.js

Backbone.js adalah framework yang memberikan struktur pada aplikasi web dengan menyediakan model, custom events, API, views, dan koneksi melalui RESTful API. Backbone.js mengimplementasikan arsitektur MVC secara parsial, karena view di dalamnya juga berperan sebagai controller. Backbone.js berupaya mengurangi kompleksitas seperti two-way data binding atau built-in loops yang ada di framework lain untuk menghindari masalah kinerja.

var ItemView = Backbone.View.extend({ tagName: 'li' }); var BodyView = Backbone.View.extend({ el: 'body' }); var item = new ItemView(); var body = new BodyView(); alert(item.el + ' ' + body.el);

Meteor

Meteor adalah framework terbuka untuk aplikasi web, seluler, dan desktop yang telah digunakan oleh lebih dari setengah juta pengembang di seluruh dunia. Meteor menyertakan sekumpulan teknologi untuk membangun aplikasi yang selalu terkoneksi dengan server dan bersifat reaktif. Meteor memungkinkan pengembang untuk membangun aplikasi dengan menggunakan Javascript yang sederhana, efisien, dan dapat diperbesar.

<template name="Lists_show_page"> {{#each listId in listIdArray}} {{> Lists_show (listArgs listId)}} {{else}} {{> App_notFound}} {{/each}} </template>
Template.Lists_show_page.onCreated(function() { this.getListId = () => FlowRouter.getParam('_id'); this.autorun(() => { this.subscribe('todos.inList', this.getListId()); }); }); Template.Lists_show_page.helpers({ listIdArray() { const instance = Template.instance(); const listId = instance.getListId(); return Lists.findOne(listId) ? [listId] : []; }, listArgs(listId) { const instance = Template.instance(); return { todosReady: instance.subscriptionsReady(), list() { return Lists.findOne(listId); }, todos: Lists.findOne(listId, {fields: {_id: true}}).todos() }; } });

Polymer

Polymer adalah framework terbuka untuk membangun aplikasi web. Polymer memungkinkan programmer membuat komponen web yang terenkapsulasi dan dapat digunakan kembali. Menggunakan komponen web yang dibangun dengan Polymer cukup mudah, programmer cukup mengimpor komponen tersebut dan menggunakannya seperti elemen HTML standar pada umumnya.

<script src="node_modules/@webcomponents/webcomponents-loader.js"></script> <script type="module"> import {PolymerElement, html} from '@polymer/polymer'; class MyElement extends PolymerElement { static get properties() { return { mood: String }} static get template() { return html` <style> .mood { color: green; } </style> Web Components are <span class="mood">[[mood]]</span>! `; } } customElements.define('my-element', MyElement); </script> <my-element mood="happy"></my-element>

Kesimpulan

10 framework di atas adalah framework frontend yang populer di kalangan programmer. Jika Anda hendak memilih suatu framework untuk proyek frontend, alangkah baiknya Anda melakukan riset kecil terlebih dahulu. Pemilihan framework sebaiknya mempertimbangkan:

  1. Kapan rilis terakhir framework tersebut. Jangan sampai Anda memilih framework yang usang karena berpotensi besar memiliki bug yang belum diperbaiki ataupun fitur yang kalah dari framework lainnya.
  2. Apakah framework memiliki dukungan dari pembuat maupun komunitas seperti dokumentasi, tutorial, forum tanya-jawab, dan ketersediaan berbagai komponen tambahan lainnya.
  3. Sesuaikan dengan gaya Anda dalam menulis kode. Framework yang katanya bagus dan populer belum tentu sesuai dengan gaya pemrograman Anda. Setiap programmer memiliki gaya yang khas. Jika Anda memaksakan diri untuk memakai framework tertentu namun tidak sesuai dengan gaya Anda, proyek yang Anda miliki tidak akan terlihat menarik untuk dikerjakan.

Angular dan ReactJS adalah dua framework yang sangat menjanjikan. Keduanya dikembangkan oleh perusahaan raksasa dan sudah 'battle-proven' untuk membuat berbagai aplikasi web dan mobile. Selain itu, keduanya juga laris manis di dunia kerja. Svelte adalah framework baru, tapi framework ini sangat potensial untuk mengambil pangsa pasar di masa depan. Jika Anda ingin mencari 'rasa' baru dalam pemrograman, Svelte layak untuk dicoba.

Bagaimana dengan Nirsine? Kami memilih Vue.js, karena framework ini memiliki semua yang kami butuhkan untuk membuat produk terbaik untuk client kami. Vue.js memiliki sifat yang reaktif, modular, dan to the point. Dan yang terpenting Vue.js sangat sesuai dengan gaya pemrograman kami di Nirsine.