Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
informatique:javascript [05/06/2017 10:54] – [Bootstrap] cyrille | informatique:javascript [26/04/2024 09:22] (Version actuelle) – [Alpine.js] cyrille |
---|
| |
Voir aussi; | Voir aussi; |
* [[/informatique/javascript/jquery|/informatique/javascript/jquery]] | |
| * [[:informatique:javascript:jquery|/informatique/javascript/jquery]] |
* [[https://hackernoon.com/a-map-to-modern-javascript-development-2017-16d9eb86309c|A Map To Modern JavaScript Development (2017)]] | * [[https://hackernoon.com/a-map-to-modern-javascript-development-2017-16d9eb86309c|A Map To Modern JavaScript Development (2017)]] |
| |
De la doc: | De la doc: |
| |
* [[https://developer.mozilla.org/fr/JavaScript|Centre de documentation Mozilla]] | * [[https://developer.mozilla.org/fr/JavaScript|Centre de documentation Mozilla]] |
* [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript|Introduction to Object-Oriented JavaScript]], [[http://javascript.info/tutorial/oop|Javascript OOP patterns]] (POO) | * [[https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS|Object-oriented JavaScript for beginners]] |
* [[http://orizens.com/wp/topics/oop-javascript-jquery-binding-events-and-keep-the-contex/|OOP Javascript, Jquery, Binding events and keep the context (this)]] (POO) | * [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript|Introduction to Object-Oriented JavaScript]], [[http://javascript.info/tutorial/oop|Javascript OOP patterns]] (POO) |
| * [[http://orizens.com/wp/topics/oop-javascript-jquery-binding-events-and-keep-the-contex/|OOP Javascript, Jquery, Binding events and keep the context (this)]] (POO) |
* Callbacks vs Events | * Callbacks vs Events |
* [[http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/|Callbacks vs Events]] well presents the difference | * [[http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/|Callbacks vs Events]] well presents the difference |
* [[https://jsperf.com/event-vs-callback|performance test]] | * [[https://jsperf.com/event-vs-callback|performance test]] |
* [[https://developers.google.com/web/fundamentals/primers/promises/?hl=en#promise-terminology|About Promise]] et sur la page [[https://cyrille.giquello.fr/informatique/javascript/jquery|jquery]] (promise, deferred) | * [[https://developers.google.com/web/fundamentals/primers/promises/?hl=en#promise-terminology|About Promise]] et sur la page [[https://cyrille.giquello.fr/informatique/javascript/jquery|jquery]] (promise, deferred) |
| |
| News, listes d'outils et librairies : |
| |
Liste d'outils et librairies : | * [[https://codewithhugo.com/|Code with Hugo]], Node.js and JavaScript Guides |
* http://www.hlrnet.com/frinprog.htm | * [[http://www.hlrnet.com/frinprog.htm|http://www.hlrnet.com/frinprog.htm]] |
| |
| [[http://jsperf.com/jsPerf|http://jsperf.com/jsPerf]] |
| - JavaScript performance playground: jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks. |
| |
[[http://jsperf.com/jsPerf]] - JavaScript performance playground: jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks. | |
| |
===== Tools ===== | ===== Tools ===== |
| |
Online Compress/Minify Javascript: | [[/informatique/javascript/tests de compatibilité]] |
| |
| ==== Online Compress/Minify Javascript ==== |
* [[http://jscompress.com/]] | * [[http://jscompress.com/]] |
* [[http://javascriptcompressor.com/]] | * [[http://javascriptcompressor.com/]] |
| |
[[http://fr.slideshare.net/community_streamdataIO/2015-0622-parisjs-websocket-vs-sse-v2|Websocket vs SSE]] (//[[/glossaire/SSE|Server Sent events (SSE)]]//) | [[http://fr.slideshare.net/community_streamdataIO/2015-0622-parisjs-websocket-vs-sse-v2|Websocket vs SSE]] (//[[/glossaire/SSE|Server Sent events (SSE)]]//) |
| |
| ==== FullPage ==== |
| |
| Create Beautiful Fullscreen Scrolling Websites |
| |
| https://alvarotrigo.com/fullPage |
| |
| one page website |
==== Flexigrid ==== | ==== Flexigrid ==== |
| |
Nice options and Ajax Call. | Nice options and Ajax Call. |
| |
http://www.bram.us/projects/js_bramus/jsprogressbarhandler | [[http://www.bram.us/projects/js_bramus/jsprogressbarhandler|http://www.bram.us/projects/js_bramus/jsprogressbarhandler]] |
| |
| ==== Popper.js ==== |
| |
==== YUI TreeView Control ==== | {{ :informatique:6f515cba0f81af6fb612d092632254e1.png?140}} |
| |
| Easily position tooltips, popovers (popup) or anything with just a line of code. Used by Bootstrap 4. |
| |
| [[https://popper.js.org/|https://popper.js.org/]] |
| |
| |
| ==== Tree View ==== |
| |
| === FancyTree === |
| |
| https://github.com/mar10/fancytree |
| |
| https://github.com/mar10/fancytree/wiki |
| |
| https://wwwendt.de/tech/fancytree/demo/#sample-ext-glyph-svg.html |
| === YUI TreeView Control === |
| |
[[http://developer.yahoo.com/yui/treeview/]] | [[http://developer.yahoo.com/yui/treeview/]] |
| |
| |
==== Dojo Dijit Tree ==== | === Dojo Dijit Tree === |
| |
http://dojotoolkit.org/reference-guide/dijit/Tree.html | http://dojotoolkit.org/reference-guide/dijit/Tree.html |
==== Lightbox ==== | ==== Lightbox ==== |
| |
Automatic image gallery from images on html page. | Automatic image gallery from images in popup on html page. |
| |
http://lokeshdhakar.com/projects/lightbox2/ | http://lokeshdhakar.com/projects/lightbox2/ |
| |
| Fonctionne avec attribut'' data-lightbox="image-1"'' sur un lien ''a''. |
==== Lity ==== | ==== Lity ==== |
| |
Lightweight, accessible and responsive lightbox. | Lightweight, accessible and responsive lightbox (html popup). |
| |
http://sorgalla.com/lity/ | http://sorgalla.com/lity/ |
| |
https://kenwheeler.github.io/slick/ | https://kenwheeler.github.io/slick/ |
| |
| ==== PDF.js ==== |
| |
| Mozilla PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5. |
| |
| https://github.com/mozilla/pdf.js |
| |
==== Gordon ==== | ==== Gordon ==== |
* http://windhistory.com/station.html?CYTL | * http://windhistory.com/station.html?CYTL |
* elastic collision http://bl.ocks.org/1706523 | * elastic collision http://bl.ocks.org/1706523 |
| |
| * [[http://blockbuilder.org/denisemauldin/ceb7065687c125223339a26a47d58a28|d3 v4 realtime line chart]] |
| * [[https://bl.ocks.org/mbostock/3883245|Line Chart]] |
| |
==== JSXGraph ==== | ==== JSXGraph ==== |
| |
http://www.jqplot.com | http://www.jqplot.com |
| |
| ==== Chart.js ==== |
| |
| Simple yet flexible JavaScript charting for designers & developers |
| |
| https://www.chartjs.org/ |
| |
==== plotly.js ==== | ==== plotly.js ==== |
https://plot.ly/javascript/ | https://plot.ly/javascript/ |
| |
==== morris.js ==== | * excellent ! |
| * navigation dans les données intuitive |
| * **mais volumineux (2,3 Mo)** |
| * Le module "basic" fait 700 Ko, voir [[https://github.com/plotly/plotly.js/blob/master/dist/README.md#partial-bundles|partial-bundles]] |
| |
| ==== Frappé Charts ==== |
| |
| https://frappe.github.io/charts/ |
| |
| * 52 Ko |
| * excellent |
| |
| ==== morris.js ==== |
| |
https://morrisjs.github.io/morris.js/ | https://morrisjs.github.io/morris.js/ |
| |
==== flot ==== | ==== flot charts ==== |
| |
Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking. | Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking. |
Video.js is an open source library for working with video on the web, also known as an HTML video player. | Video.js is an open source library for working with video on the web, also known as an HTML video player. |
| |
| ==== graph visualization ==== |
| |
| === Sigma.js === |
| |
| [[/informatique/javascript/sigmajs|Sigma.js]] |
| |
| === Dracula.js === |
| |
| :!: depecrated https://www.graphdracula.net/ |
| |
| === d3js === |
| |
| https://d3js.org/ |
| |
| * [[https://d3-graph-gallery.com/network.html|Network graph]] |
| * [[https://d3-graph-gallery.com/graph/network_basic.html|Most basic network chart in d3.js]] |
| |
===== 3D & Game engine ===== | ===== 3D & Game engine ===== |
| |
* [[http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised|MooTools vs jQuery vs Prototype vs YUI vs Dojo comparison revised]] (2009) | * [[http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised|MooTools vs jQuery vs Prototype vs YUI vs Dojo comparison revised]] (2009) |
| |
| ==== Alpine.js ==== |
| |
| AlpineJs permet de créer/gérer des composants falicement avec Javascript sans se lancer dans une SPA, très léger (<10ko gzippé et minifié) et n'utilise pas de DOM virtuel. Sa syntaxe est similaire à VueJS. C'est un bon outil pour remplacer jQuery et moins complexe que VueJs / React / Angular. |
| |
| [[/informatique/javascript/alpinejs|AlpineJS]] |
==== Vue.js ==== | ==== Vue.js ==== |
| |
Tutos FR: | Tutos FR: |
* [[http://laravel.sillo.org/vue-js-on-se-lance/]] | * [[http://laravel.sillo.org/vue-js-on-se-lance/]] |
| * [[http://maurice-chavelli.developpez.com/tutoriels/javascript/les-bases-vue-js-2/|apprendre à utiliser le framework Vue.js version 2]] |
| |
Tuto EN: | Tuto EN: |
* [[https://yuche.github.io/vue-strap/|VueStrap.js]] is Bootstrap components built with Vue.js | * [[https://yuche.github.io/vue-strap/|VueStrap.js]] is Bootstrap components built with Vue.js |
* [[https://github.com/surfbirdapp/surfbird|surfbird]] a Twitter client built on [[/informatique/mobile_app#electron|Electron]] and [[/informatique/javascript#Vue.js]] | * [[https://github.com/surfbirdapp/surfbird|surfbird]] a Twitter client built on [[/informatique/mobile_app#electron|Electron]] and [[/informatique/javascript#Vue.js]] |
| * Wordpress |
| * [[https://www.sitepoint.com/building-a-wordpress-plugin-with-vue/|Building a WordPress Plugin with Vue]] 2018 - utilise un endpoint WP-API (ex: ''/wp-json/wp/v2/posts?filter[orderby]=date'' |
| * [[https://github.com/bshiluk/vue-wordpress|vue-wordpress]] Starter Template for building WordPress themes as Vue.js SPAs |
| * |
==== React.js ==== | ==== React.js ==== |
| |
[[http://lunrjs.com|LUNR.js]] a simple full-text search in your browser. | [[http://lunrjs.com|LUNR.js]] a simple full-text search in your browser. |
| |
| ==== Webapp & Offline mode ==== |
| |
| * [[https://verekia.com/html5/tutoriel-application-web-offline-html5-cache-manifest/|Tutoriel : Une application web offline HTML5 avec le cache manifest]] |
| * [[https://developers.google.com/web/fundamentals/codelabs/offline/|Adding a Service Worker and Offline into your Web App]] |
| * [[https://www.sitepoint.com/offline-web-application-tutorial/|How To Create an Offline Web Application]] (02/2010) |
===== Démos ===== | ===== Démos ===== |
| |