External Resources

External Resources merupakan plugin-plugin yang dibutuhkan dalam project, seperti : font-awesome, slick.js, dll.

Source-Code resources dapat di-include dalam project sebagai plugin, dapat pula di-include melalui CDN dengan beberapa pertimbangan.

Usefull Resources

Beberapa rekomendasi resources yang dapat berguna dalam project Front-End antara lain:

Include via CDN

Library yang telah tersedia di server CDN sebaiknya di-include via URL CDN nya. CDN yang direkomendasikan adalah jsdelivr.com, alternatif yang dapat digunakan adalah cdnjs.com.

Penggunaan CDN memiliki keuntungan bagi pengunjung website, yaitu :

  • Memungkinkan menerima salinan cache dari lokasi server CDN terdekat.
  • Memungkinkan menerima salinan cache library yang sama dari situs lain.
  • Mengurangi waktu loading.
  • Mengurangi beban server.

Gunakan sebagai Local Plugin

Beberapa resource (library) yang belum tersedia di CDN, mengharuskan source-code di-include secara local dalam project.

Sebaiknya library-library dikumpulkan pada single-file di direktori assets/js : assets/js/vendors.js dengan bentuk minified source-code. Setiap library dipisah baris.

Contoh penyusunan script pada vendors.js sebagai berikut :

/*slick-carousel 1.8.1*/
!function(i){"use strict";"function"==typeof define&&define.amd?define(["jquery"],i):"undefined"!=typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function(i){"use strict";var e=window.Slick||{};(e=function(){var e=0;return function(t,o){var 
/*! jQuery asScroll - v0.1.1 - 2015-05-11 * https://github.com/amazingSurge/jquery-asScroll * Copyright (c) 2015 amazingSurge; Licensed GPL */
!function(a,b,c,d){"use strict";var e=0,f=function(){return"undefined"!=typeof a.performance&&a.performance.now?a.performance.now()
/*! jQuery asScrollable - v0.3.1 - 2015-06-15 * https://github.com/amazingSurge/jquery-asScrollable * Copyright (c) 2015 amazingSurge; Licensed GPL */
!function(a,b,c,d){"use strict";function e(){return"undefined"!=typeof a.performance&&a.performance.now?a.performance.now():Date.now()