(Présentation mise à jour en février 2015.)

En savoir plus sur le projet

Introduction à TypeScript

TypeScript est un langage qui se compile en JavaScript.

À lire : Pourquoi utiliser TypeScript ?

Genèse

Pourquoi un nouvel outil ? Je souhaitais que la vue soit construite à partir de « composants » emboitables.

Généralités et avancement

Woc.ts est un framework TypeScript. Il s'articule autour d'un schéma MVC.

Licence CC0 (open-source). Compatible IE9+. 35 Ko minifié (février 2015).

Objectifs

L'objectif du projet est de fournir un cadre de travail modulaire aux développeurs TypeScript.

Le projet et son originalité

Woc.ts ne fait aucun tour de force technologique. Il propose en revanche une manière modulaire d'organiser du code. L'unité de programme de la vue est le composant.

Les composants vont du plus petit (un bouton) au plus grand (tout l'écran). Un composant Woc est un répertoire qui regroupe en particulier du code JavaScript, HTML et CSS. Il peut utiliser d'autres composants et des lib externes. L'encapsulation des composants est une grande force de Woc, elle devrait permettre de toujours développer à petite échelle, même dans des projets gigantesques.

La deuxième spécificité que je souhaite souligner est la simplicité. Le processus de minification et de concaténation est automatisé (pas besoin de Browserify), le résultat est une performance un poids maitrisés.

Les forces de Woc.ts :

• La réutilisation des composants et services ;
• La légèreté des applications déployées grâce à la maitrise du nombre de ressources à charger ;
• Une prise en main rapide : Woc est fait pour que vous utilisiez jQuery ou vos bibliothèques de programmation habituelles ;
• Pas de dépendance du noyau envers une bibliothèque de programmation externe.

Les faiblesses :

• Les modules en TypeScript seront probablement remaniés par TypeScript 2.0 ;
• Il manque un framework pour les tests unitaires.

Le site Web

http://tarh.github.io/woc.ts/

-
Edité par paleo-c8 18 février 2015 à 10:07:38

Version 0.5.1. Meilleur mécanisme de destruction des composants : plus simple à utiliser, moins de risque de fuites de mémoire.

TypeScript n'a pas l'air d'intéresser grand monde ?

Salut,

Je suis pas un pro, mais WOT est déjà le nom du plugin Firefox Web Of Trust

++

Bien vu ! Ça ne dérange pas.

Intéressant ça !

Est-ce que tu pourrais mettre quelques exemples de code dans ta description ? De voir le réel intérêt du framework.

Ce serait bien d'avoir des informations concernant l'intégration à Visual Studio (template de projets) et la différence avec des frameworks JS clients tels que AngularJS ou KnockoutJS.

Merci ! Alors regardons du code situé dans le composant "todos.Item". Il s'agit d'un bloc destiné à être placé dans une liste. Un composant est un répertoire qui contient des fichiers JavaScript (et TypeScript), des fichiers HTML et des fichiers CSS.

Voici un template en HTML :

<div class="todos-item">
	<span class="lbl"></span>
	{placeholder: btnDelete}
</div>

On remarque l'emplacement réservé nommé "btnDelete". Le contenu de cet emplacement est défini depuis le code TypeScript du composant :

var btn = cc.createComponent('wotsingle.Button', {'label': '×'});
this.$bloc = $(cc.getTemplate('.todos-item', {
	'btnDelete': btn.getElement()
}));

Ici un composant "wotsingle.Button" est instancié (ligne 1). Puis le template ci-dessus est instancié à son tour en affectant l'élément HTML du composant bouton au placeholder "btnDelete", et le résultat est placé dans un objet jQuery (ligne 2).

Pour tester cet exemple le plus simple est de décompresser la release dans un répertoire accessible par une URL, puis de charger la page "todos.html". Le code ci-dessus provient des fichiers dans "todos.w/todos_Item.c/".

-
Edité par paleo-c8 25 mai 2014 à 18:32:28

Odonno a écrit:

Ce serait bien d'avoir des informations concernant l'intégration à Visual Studio (template de projets) et la différence avec des frameworks JS clients tels que AngularJS ou KnockoutJS.

Au niveau de l'intégration dans Visual Studio : je ne travaille pas avec cet IDE. Mais il n'y a pas de raison qu'il pose un problème. Essayez de créer un projet TypeScript, puis décompressez-y une arborescence Wot. Certaines tâches pourraient être facilitées par des plugins dans l'IDE (comme par exemple la déclaration des nouveaux composants dans le fichier de paramétrage du bundle), je n'ai pas du tout le temps matériel de m'occuper de ça pour le moment. Ces améliorations de confort ne joueraient de toute manière qu'à la marge sur le temps de développement.

C'est vrai que c'est pas mal tout ça : moteur de template, réutilisabilité des composants, architecture MVC.

Je suis plus adepte du MVVM (que l'on retrouve avec KnockoutJS justement) mais ton framework mérite le coup d'oeil.

PS : les gens sont friands des schémas !

Concernant le "moteur de templates", ce n'en est pas vraiment un. C'est juste un mécanisme de marqueurs dont le but est de donner des points d'insertion pour des éléments construits ailleurs que dans le composant courant. Plus un mécanisme de libellés multilingues. Je ne compte pas mettre en place un vrai moteur de templates, du moins pas dans le noyau. Les templates peuvent être facilement manipulés par jQuery/Sizzle.

Idem avec le couplage (binding) entre le modèle et la vue : il n'est pas réalisé par le noyau. Le développeur fait comme il l'entend, par exemple à l'ancienne avec l'appel de méthodes de rafraichissement dans la vue… ou encore à la manière future avec Object.observe.

Odonno a écrit:

PS : les gens sont friands des schémas !

Le noyau s'occupe principalement du chargement des ressources d'une telle manière que les composants et services soient facilement réutilisables. C'est ça le but de Wot. Wot n'est pas un environnement complet qui cadre le développeur. Chaque composant est une "boite noire", chaque boite noire peut être organisée à sa manière. Je ne vois pas comment faire un schéma générique pour représenter cette idée. Les interactions entre les boites noires seront différentes selon les projets.

-
Edité par paleo-c8 26 mai 2014 à 9:47:00

Version 0.5.2 aujourd'hui. Des options pour l'outil de déploiement : http://tarh.github.io/woc.ts/fr/woc-make.html .

C'est devenu très simple de tester Woc :

1. Décompresser l'archive de la release dans un dossier accessible par HTTP ;
2. Charger "todos.html".

-
Edité par paleo-c8 15 juillet 2014 à 16:29:04

Bonjour à ceux qui suivent.

Les nouveautés de la version 0.6.0 :

• J'ai changé d'avis : le moteur de template, c'est l'avenir. Le moteur actuel est désormais exécuté en tant que service en dehors du noyau. Ainsi d'autres moteurs pourront être intégrés et plusieurs tourneront alors simultanément, chaque composant choisissant le sien.
• Le projet est renommé en "Woc.ts" (Well-Organized Code).

Petite info un peu en dehors du scope : j'ai publié une introduction au langage TypeScript pour les développeurs JavaScript.

Version 0.8.0 aujourd'hui…

Le langage TypeScript décolle bien chez les anglophones, mais pas du tout chez les francophones. Dommage. En aout je passerai la documentation du framework en anglais.

Tu as un système de numérotation en trois chiffres mais tu n'utilises que les deux premiers ; même pour les ajouts mineurs...

Bon travail sinon !

Bonjour. Le projet a évolué, il est en version 0.13.1 maintenant. Les nouveautés depuis août :

• Des services encapsulant les moteurs de templates Vue.js et Handlebars ;
• Un service pour les boites de dialogues ;
• Un mécanisme permettant d'utiliser le cache du navigateur durant le développement ;
• Une nouvelle unité de programme pour les configurations : l'initializer.

En outre, le site est entièrement refait, en anglais, avec un tutoriel relativement exhaustif pour apprendre à utiliser Woc.ts.

À propos de composants et de CSS, j'ai publié en aout dernier un article Bonnes pratiques en CSS : BEM et OOCSS. Cette méthodologie représente la brique CSS de l'architecture modulaire de Woc.ts.

Important : Je ne compte plus donner de nouvelles ici car je ne suis pas certain que ça intéresse et je ne voudrais pas faire remonter le sujet inutilement. Ceux qui souhaitent être tenus au courant des évolutions peuvent me suivre sur Twitter et GitHub.