Outils pour utilisateurs

Outils du site


informatique:javascript

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
informatique:javascript [28/10/2017 16:51] – [Vue.js] apprendre à utiliser le framework Vue.js version 2 cyrilleinformatique:javascript [10/10/2023 19:39] (Version actuelle) – [Alpine.js] cyrille
Ligne 2: Ligne 2:
  
 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/]]
Ligne 60: Ligne 69:
  
 [[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 ====
  
Ligne 101: Ligne 118:
 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/]]
Ligne 111: Ligne 145:
  
  
-==== Dojo Dijit Tree ====+=== Dojo Dijit Tree ===
  
 http://dojotoolkit.org/reference-guide/dijit/Tree.html http://dojotoolkit.org/reference-guide/dijit/Tree.html
Ligne 130: Ligne 164:
 ==== 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/
Ligne 152: Ligne 187:
  
 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 ====
Ligne 247: Ligne 288:
  
 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 ====
Ligne 254: Ligne 301:
 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.
Ligne 277: Ligne 335:
 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 =====
  
Ligne 326: Ligne 401:
   * [[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 ====
 +
 +https://github.com/alpinejs/alpine/
 +
 +AlpineJs permet de manipuler le DOM 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 entre jQuery et VueJs.
 +
 +Présentation des principes d'AlpineJs : https://codewithhugo.com/alpine-tips/
 +
 +  * [[https://www.weblogin.fr/blog/119-alpinejs-le-framework-js-entre-jquery-et-vuejs|AlpineJS le framework JS entre JQuery et VueJS]]
 +  * [[https://laravel-news.com/alpine-js-intersect-persist-trap|New Alpine.js Plugins: Intersect, Persist, and Trap]]
 +    * [[https://alpinejs.dev/plugins/intersect|Intersect plugin]] attribute to an element with a callback that should be ran whenever that element "intersects" with the user's viewport.
 +    * [[https://alpinejs.dev/plugins/persist|Persist plugin]] provides a new magic method for integrating your Alpine dataset with localStorage.
 +    * The [[https://alpinejs.dev/plugins/trap|Trap plugin]] provides a simple way to "trap" focus inside elements like modals and and other dialogue elements. Trapping focus is very beneficial for users using screen readers or navigating via keyboard in general.
 +  * [[https://www.alpinetoolbox.com/|alpinetoolbox]] quick start, examples, tools are all open source and built using Alpine.js and mostly [[informatique/web/tailwind_css|Tailwind CSS]].
 +  * [[https://github.com/alpine-collective/awesome|alpine-collective / awesome]] pour une curation de ressources sur AlpineJs
 +  * Quelques composants https://js.hyperui.dev dont un datepicker
 ==== Vue.js ==== ==== Vue.js ====
  
Ligne 352: Ligne 443:
   * [[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 ====
  
Ligne 688: Ligne 782:
 [[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 =====
  
informatique/javascript.1509202272.txt.gz · Dernière modification : 28/10/2017 16:51 de cyrille

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC0 1.0 Universal
CC0 1.0 Universal Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki