Mengenal Javascript Framework dan 10 Framework Terbaiknya

Pada artikel saya sebelumnya sudah dibahas mengenai Framework PHP. Kali akan dibahas mengenai Framework Javascript dan 10 framework terbaik. Tidak begitu detail sih tapi cukup untuk mengobati rasa penasaran kita "Apa itu Framework Javascript ?".

Sama seperti sebelumnya, Framework itu adalah kerangka kerja. Kerangka kerja yang memudahkan kita menyelesaikan suatu pekerjaan. Jadi Framework Javascript adalah Javascript yang telah diatur menjadi suatu pola yang memudahkan kita dalam penggunaannya.

Awal pengembangan Framework Javacript dimulai saat memasuki era Web 2.0, generasi kedua dari layanan berbasis web dimana lebih meniktikberatkan pada kolaborasi online, sharing content antar pengguna dan lebih terarah ke User Content Generated.

Nah, berdasarkan kebutuhan akan konsep dan paradigma baru dalam pengembangan aplikasi berbasis web tersebut maka dalam pengembangannya diperlukan suatu sistem alur kerja yang bisa memudahkan dalam menciptakan aplikasi berbasis web yang canggih dan interaktif. Salah satu yang sering digunakan para developer tersebut adalah JavaScript Framework/Libraries dimana didalamnya terdapat JavaScript yang telah ditulis sedemikian rupa dimana sangat membantu dalam pengembangan sebuah Aplikasi Web, terutama dalam pengembangan AJAX (Asynchronous JavaSript And XML). Sebuah teknik pemanggilan cepat tanpa melakukan reload terhadap suatu page.

Dengan JavaScript Libraries tersebut para programmer bisa dengan mudah mengimplementasikan paradigma WEB 2.0 yang baru seperti User interface yang dinamik dan sangat interaktif kepada usernya.

Berikut adalah 10 TOP FRAMEWORK JAVASCRIPT yang dikutip dari sini. Tapi sayang, survey ini dilakukan pada bulan november 2009 (survey 2010 belum nemu hehe :D ). Oke. langsung aja...

1. jQuery: The Write Less, Do More, JavaScript Library

Yes, jQuery is really a new kind of JavaScript library, you can write less but do more; maybe jQuery is the JavaScript framework that have the biggest collection of plug-ins and add-ons. Some things you should know:

• Current version: 1.3.2
• Size: 19 KB (Minified and Gzipped) and 120 KB (Uncompressed Code)
• Author: John Resig
• Tutorials in 19 languages: 183 (data on 19 October, 2009)
• Sites in use: 1000+
• Plugins: 3.493 (data on 19 October, 2009)
• Easy to learn
• Support designers very well, by using CSS syntax
• A lots of nice and lovely extensions
• Great community, maybe largest
• Used by millions of website and well known companies like Google, DELL, CBS, NBC, DIGG, Bank og America, WordPress, Drupal, Mozilla etc…

2. MooTools – a compact javascript framework

MooTools is an Open Source MIT application, which you have the possibility to use it and modify it in every circumstance.

• Current version: 1.2.3
• Uncompressed Size: 95 KB (client) and 22 KB (server)
• Author: Valerio Proietti
• Using: w3c, cnet, bing, …
• Plugins on Official site: 4
• Better OOP structure
• The animations are smoother
• The syntax and the handle of elements are more logical

3. Prototype: Easy Ajax and DOM manipulation for dynamic web applications

Used by the big media companies and organizations, Protorype is unique JavaScript framework that is quickly becoming the codebase of choice for web application developers. And now with the latest version, 1.6.1, Protorype has improved performance, new user-action events, and compatibility with the mordern browsers.

• Lastest version: 1.6.1 (1st September, 2009)
• Uncompressed Size: 136 KB (closely 5.000 code lines)
• Creator: Sam Stephenson
• Using: NASA, CNN, NBC, …
• Plugins: 150+
• Better for the big web apps, give you many choices to write custom code

4. Dojo Toolkit: great experiences for everyone

Dojo Core features small, fast, deep – gives you a rich set of utilities for building responsive applications; great interface widgets with accessibility and localization built right in.

• Lastest version: 1.4 Beta
• Compressed Size: 26 KB (closely 5.000 code lines)
• Foundation: Dojo Foundation
• Dojo Users: AOL, IBM, Sun, …
• Client-side data storage
• Server-side data storage
• Asynchronous communication

5. script.aculo.us: easy-to-use, cross-browser user interface JavaScript libraries

Update to the lastest version, script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours, have some improved features as: loading work maker, Windows Media player/RealPlayer checker, fixing old issues, … check more at here

• Lastest version: 1.8.3 (8 October, 2009)
• Size of Compressed package: 197 KB (including Prototype + Test page)
• Creator: Thomas Fuchs
• Users: Gucci, Feedburner, Ruby on Rails, …
• Documentation wiki & Usage
• Extending the Prototype framework by adding visual effects, user interface controls, and utilities

6. ExtJS: Cross-Browser Rich Internet Application Framework

ExtJS is a very cool cross-browser JavaScript framework for helping you build rich web applications, support all modern web browsers. Plus plenty of plugins and extensions, your ExtJS based web applications become more attractive by features such as well designed, documented and extensible Component model, high performance, easy-customizable UI widgets, …

• Lastest version: 3.0 (6th July, 2009)
• Size of Compressed package: 197 KB (including Prototype + Test page)
• Creator: Jack Slocum
• Users: Gucci, Feedburner, Ruby on Rails, …
• Download | Samples & Demos | API Documentation
• Great components and support

7. UIZE: supporting widgets, AJAX, DOM, templates, and more

Some things about UIZE you should know:

- is an open source Javascript framework
- easy-to-change your own CSS skins
- plenty of built-in widgets
- amazing effects and powerfull features

• Size of Compressed package: 4.47 MB
• Creator: Chris van Rensburg

8. YUI Library: is proven, scalable, fast, and robust

YUI is one of the biggest JavaScript frameworks in this list. YUI has all things to help you build interactive web applications using techniques such as DOM scripting, DHTML and AJAX by a set of powerful utilities and controls. YUI has countless powerful features, plugins, extensions that take you the very long time to learn.

• Lastest version: 3 (September 2009)
• Size of Full Developer Kit: 5.7 MB (including Source, debug files, examples, and more)
• Creator: Yahoo! Developer Network
• Sites Powered by YUI: LinkedIn, Wikia, NewsVine, …

9. Archetype

Let sees the power of Archetype by yourself to understand what it can do.

• Lastest version: 0.10.0 (September 2009)
• Size of package: 2.14 MB
• Creator: Temsa & Swiip
• In use: GifTeer, Meteo France, …

10. qooxdoo: the new era of web development

What’s qooxdoo? That’s great and powerfull JavaScript framework to create rich internet applications (RIAs) by taking the advantages of object-oriented JavaScript. qooxdoo includes a platform-independent development tool chain, a state-of-the-art GUI toolkit and an advanced client-server communication layer. It is open source under an LGPL/EPL dual license.

• Lastest version: 0.8 (September 2009)
• Size of package: 24 MB
• Core Developers: 1&1 Internet AG
• Download | Samples & Demos | Documentation
• Fully-featured graphical user interface toolkit
• Drag and drop capabilities among other components

Yoo. Itu dia tentang 10 Framework Javascript. Kalo menurut gw sendiri, yang terbaik itu jQuery. Alasannya ? Ya karena baru itu aja yang bisa gw pake. hehe. Lalu bagaimana menurut anda ?

Simple Javascript Floating Menu

Menu tidak cuma sebuah link yang ada di header sebuah web. Saat ini ada banyak sekali variasi menu yang dapat dikembangkan agar website terlihat lebih menarik. Salah satu dari variasi tersebut adalah Floating Menu.

Saya juga baru belajar tentang Floating menu. Sekilas tentang Floating Menu, Floating Menu ini adalah sebuah menu yang posisinya absolute dan selalu tampil paling atas (bukan diheader maksudnya :D) . Floating menu ini juga terkadang mengikuti scroll dari browser. Ya sesuai dengan variasinya lah :D.

Nah kali ini saya ingin berbagi script tentang floating menu yang saya dapat dari berbagai sumber. Sedikit info lagi, Floating Menu ini menggunakan javascript jadi pastikan javascript di browser anda dalam keadaan aktif.

DOWNLOAD FLOATING MENU

Mengenal PHP dan PHP Framework

PHP mungkin menjadi salah satu resource yang penting didalam pembuatan web. Bahasa pemrograman yang bersifat server-side ini memang dirancang untuk para pengembang web agar dapat menciptakan suatu halaman web yang bersifat dinamis. Sekilas tentang PHP, PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995 dan terus dikembangkan hingga saat ini. Ada banyak sekali web termasuk CMS yang dibuat menggunakan bahasa PHP seperti Wordpress dll.

Itu sekilas tentang PHP. Namun apa itu PHP Framework ?

Bisa dilihat dari namanya. Framework dapat diartikan sebagai sebuah kerangka kerja. Kerangka kerja dimana dapat memudahkan pekerjaan kita. Jika dikaitkan dengan PHP maka dapat diartikan sebagai suatu kerangka kerja yang telah terpola dan memudahkan pengembang web dalam pembuatan web yang menggunakan script PHP. Mempermudah yang dimaksud misalnya, Dalam membuat sebuah aplikasi web kita sering menulis script PHP secara keseluruhan (konvensional) dan itu pun kita ulang pada halaman yang lain. Bukankah itu begitu tidak efesien disamping berat ketika diload ? Dengan PHP Framework semua bisa teratasi. Semuanya sudah diatur menjadi pola-pola tertentu yang disebut dengan class. Pola/class inilah yang meringankan kita dalam penulisan script dan load halaman web.

PHP Framework berbeda jika dibandingkan dengan CMS (Content Management System), meski sama-sama meringankan dalam pembuatan web. Jika menggunakan CMS, kita tidak perlu pusing menulis script. Semuanya telah dibuat menjadi Fix dan kita hanya perlu mengatur bagian content dan interfacenya saja. Tidak demikian dengan Framework. Membangun sebuah aplikasi web dengan menggunakan framework, kita tetap harus menuliskan kode perintah PHP sesuai dengan ruang lingkungan yang disediakan oleh framework.

PHP Framework menggunakan metode pengembangan berbasis MVC. Namun apa itu MVC ? MVC merupakan suatu metode untuk memisahkan bagian-bagian dari suatu web aplikasi. MVC adalah kependekan dari Model View Controller. MVC terdiri dari tiga bagian yaitu;

1. Model : Model mewakili struktur data. Biasanya model berisi fungsi-fungsi yang membantu kita dalam pengelolaan database seperti memasukkan data ke database, update data dan lain-lain.
2. View : View adalah bagian yang mengatur tampilan ke user. Bisa di katakan berupa halaman web.
3. Controller : Controller merupakan bagian yang menjembatani model dan view. Controller berisi script-script php yang berfungsi untuk memproses suatu data dan mengirimkannya ke halaman web.

Disinilah letak perbedaan utama antara framework dengan CMS atau PHP konvensional. Dengan metode MVC, bagian tampilan, logika serta query database diletakkan secara terpisah namun tetap sinkron sehingga pembuatan aplikasi menjadi lebih terstruktur dan sederhana. Model digunakan dalam menuliskan script database, Controller untuk mengembangkan logika pemrogramannya, sedangkan View berfungsi dalam menampilkan layout dari aplikasi yang kita buat. Kelebihan framework antara lain sebagai berikut :

1. Ringan dan cepat. Framework hanya melakukan pemanggilan pustaka/kelas yang dibutuhkan sehingga meminimalkan resource yang diperlukan sehingga ketika kita me-load sebuah halaman akan menjadi ringan dan cepat.
2. Menggunakan metode MVC. Seperti yang telah dijelaskan sebelumnya, dengan metode MVC akan mempermudah kita dalam memahami alur pemrograman karena untuk bagian tampilan, logika dan query database telah dipecah sedemikian rupa.
3. Mayortitas mendukung berbagai jenis database.

Berikut beberapa contoh PHP Framework beserta kelebihan yang dibawanya :


CodeIgniter

Kelebihan

• Mudah digunakan dan tidak memerlukan konfigurasi yang rumit
• Fungsi-fungsi pendukung yang cukup lengkap
• Mendkung PHP4 dan PHP5
• Mungkin merupakan Framework MVC paling populer dan paling banyak digunakan
• Dokumentasi yang sangat bagus, friendly dan didukung oleh forum, wiki, dan komunitas yang besar

Kekurangan

• Tidak mendukung AJAX, dan ORM
• Meyediakan dan memisahan file-file dalam MVC pattern, tapi masih memberikan kebebasan user untuk melanggar aturan MVC

CakePHP

Kelebihan

• Dukungan terhadap AJAX, ORM
• Automagic function seperti validasi input, dll, yang mempercepat coding
• Support PHP4 dan PHP5
• Lebih mencerminkan MVC yang sesungguhnya dibandingkan CI
• Komunitas pengguna yang besar dan forum cukup baik

Kekurangan

• Manual yang ada tidak selengkap CI.
• Butuh waktu belajar yang lebih lama untuk menguasai framework ini dibanding CI. Tapi jika sudah benar-benar mengerti, banyak kelebihan dibanding CI. Beberapa situs menyarankan anda untuk belajar dan terbiasa dulu
  dengan CodeIgniter baru kemudian mempelajari CakePHP.
• (http://www.zenperfect.com/2007/07/15/faceoff-codeigniter-vs-cakephp/)

Symfony

Kelebihan

• Dukungan terhadap AJAX, ORM.
• Kompatibel dengan berbagai macam database.
• Banyak library dan fungsi symfony yang sudah tersedia. Bahkan hampir mendekati CMS. Sehingga ada yang mengatakan ”Symphony is a CMS with a heart of a framework.” ini menjadi kelebihan sekaligus kekurangan.

Kekurangan

• Tidak mendukung PHP4.
• Relatif butuh waktu lama untuk mengerti framework ini.
• Instalasi dan konfigurasinya cukup rumit.

Zend

Kelebihan

• Dukungan terhadap AJAX, ORM.
• Berdasarkan informasi dari situs resminya, disebutkan bahwa fokus dari Zend Framework ini adalah untuk membangun aplikasi berbasis Web dan untuk memudahkan dalam mengakses API dari berbagai vendor seperti Google, Amazon, Yahoo!, dan Flickr.

Kekurangan

• Tidak mendukung PHP4.
• Manual yang ada kurang mengakomodasi kebutuhan.
• Performanya relatif lambat (mungkin karena banyaknya library).
• Konon katanya Framework ini hanya cocok untuk orang dengan skill PHP yang sudah sangat tinggi.

Akelos

Merupakan Framework yang relatif baru dengan kemampuan yang handal dan lengkap

Kelebihan

• Dukungan terhadap PHP4, PHP5, AJAX, ORM (cukup lengkap dan cukup mengakomodasi semua kebutuhan yang umum dari aplikasi php)

Kekurangan

• Kurang adanya dukungan komunitas. Mungkin karena masih relatif baru
• Beberapa forum mengatakan bahwa framewok ini cukup banyak memakan memory

Ingin mengetahui lebih lengkap ? Silahkan lihat disini

MooTools Image Gallery: slideGallery

Bagi pengguna framework javascript MooTools, ini ada plugins baru buat nyiptain image gallery. slideGallery itulah nama plugin MooTools untuk menciptakan carousels gambar dapat disesuaikan dengan mudah & cepat. Tekniknya hampir mirip dengan jCarousel, yakni mengkonversi list dan ditata menggunakan CSS.

Berikut penjelasan lebih lengkapnya :

slideGallery is a MooTools plugin for creating customizable image carousels easily & quickly.
It converts any given unordered list into a slider & can be styled with CSS.

The plugin can display any defined number of images horizontally or vertically, auto-play them, have prev-next buttons and these functions can be configured more with:

• setting the class of prev-next elements
• speed and duration of slides
• transition to be used
• direction of the transitions
• & more..

slideGallery works in all major browsers including IE6.

Requirements: MooTools
Compatibility: All Major Browsers
Website: http://github.com/ginger/slideGallery
Demo: http://juverman.narod.ru/slideGallery/Demo/index.html