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 ?

Waspada Penggunaan Widget di Blog Anda

Halo teman semua, lama juga ga pernah update blog nih. Well, langsung aja kali ini saya ingin berbagi pengalaman. Sering kali ketika kita (para blogger) melihat widget yang "OK" terlintas keinginan untuk memasangnya untuk menjadi pemanis dihalaman depan. Namun berhati-hatilah, terkadang widget yang kita pasang terdapat suatu code (biasanya javascript) yang effectnya belum tentu kita inginkan.

Kasusnya menimpa blog teman saya. Jadi begini masalahnya, begitu saya masuk ke blog tersebut. Secara otomatis halaman awalnya meredirect ke URL lain (auto redirect ke link eksternal). Langsung saja saya hubungi teman saya. Awalnya teman saya tidak begitu percaya dengan laporan saya dan saya pun menganggap itu kesalahan kecil. Mungkin secara tidak sengaja saya mengklik iklan yang ada di blod tersebut.

Tidak begitu lama kemudian, kasusnya mulai terlihat jelas. Ketika saya membaca salah satu artikel menarik disana, auto redirect kembali bekerja. Nah ada apa ini ? Apakah saya kembali mengklik iklan ? Saya rasa tidak. Kembali saya melaporkan kasus ini. Akhirnya teman saya langsung mengecek blognya tersebut dan mengalami hal yang sama (kena auto redirect). Awalnya saya mengira itu kesalahan pada  < meta > (meta tag) pada template. Biasanya meta tag tersebut dapat merefresh halaman atau bahkan dapat membuat jump page ke halaman lain. Tapi menurut teman saya, dia tidak ada merubah code template. Saranin lagi deh untuk mengkroscek javascript pada widget. Dan akhirnya memang benar. Salah satu dari widget tersebut (tepatnya widget bersifat iklan) menyebabkan page secara otomatis redirect ke halaman lain.

Auto redirect seperti ini terkadang menyusahkan buat para pengunjung ketika membaca artikel yang ada di blog. Saya sebagai pengunjung blog tersebut juga merasa terganggu dengan auto redirect tersebut. Maka dari itu berhati-hatilah memasang widget di blog anda. Alih-alih mencari untung malah buntung karena pengunjung kabur.

Hehe. Well, itu saja sih yang ingin saya share. Semoga bermanfaat...

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

Animated Scroll with jQuery Scroll

jQuery emang top banget. Hampir semua masalah bisa diselesaikan kalo make yang satu ini. Ini salah satu contohnya. Kemaren waktu ada tugas web, javascript scrollnya kagak jalan (Oh My Shit!). Baris demi baris saya periksa (cuma dibolak balik :D) tapi hasilnya nol. Nah kebetulan dapet bisikan dari temen (si NetSurfer) buat make jQuery API, scroll. Langsung aja searching di google. Hasilnya? Ketemu!

Scroll in jQuery. Ga cuma scroll biasa, tapi ada animasinya juga. Mantab pokoknya. Nah, berikut script yang saya peroleh dari google.

function scrollWin(){
$('html, body').animate({
scrollTop: $("#scrollToHere").offset().top
}, 2000);
}

Sedikit penjelasan,
$("#scrollToHere") itu merupakan id dari sebuah objek, anggap saja id dari sebuah <div>. Saat fungsi ini dipanggil maka secara otomatis scroll akan langsung tertuju pada posisi <div> tersebut. Jika anda tidak menggunakan <div> sebagai target. Cukup ganti

scrollTop: $("#scrollToHere").offset().top

menjadi

scrollTop: 100

Maka windows akan menuju pada posisi y=100.

Script aslinya bisa dilihat di
http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery
Semoga membantu.
Trims buat NetSurfer. :D