Follow Us on Twitter

Oracle JET - JavaScript-applicatieontwikkeling van Oracle

December 2015 - Oracle is vrij recent met een nieuwe development-toolkit gekomen voor JavaScript ontwikkelaars. Hiervoor heeft Oracle eerst een aantal meest gebruikte (of best passende) JavaScript libraries, elk voor een specifieke taak, bij elkaar gezocht en er een gemeenschappelijke laag omheen gezet, om er moderne cliënt-side applicaties mee te kunnen ontwikkelen. Die verzameling van deze libraries heeft de naam Oracle JET gekregen.

Wat betekent deze nieuwe applicatieontwikkelingsoptie de "traditionele" Oracle-ontwikkelaar? In dit Whitebook wordt uitgelegd wat Oracle JET is vanuit het perspectief van een (PL/)SQL en Forms ontwikkelaar. We laten zien wat je ermee kunt en hoe het zich verhoudt tot andere front-end ontwikkelingstools van Oracle, zoals APEX en ADF. 

Dat het met Oracle JET ook zeer goed mogelijk is om mobiele applicaties te maken (zoals het ook kan met Oracle MAF), heb ik buiten beschouwing gelaten in dit Whitebook.

Wat is Oracle JET?

Er zijn veel meer populaire volledige frameworks beschikbaar, maar in het veranderlijke JavaScript landschap is het vanuit Oracle’s perspectief niet verstandig, voor toekomstige groei en flexibiliteit, om iemand in een specifiek framework te dwingen.

JET bestaat uit een aantal frameworks. Je kunt door middel van imports in jouw project kiezen van welke je gebruik wilt maken. Dus indien nodig een ander framework kiezen, dat beter geschikt is voor die specifieke taak.

Zoals hierboven is benoemd, is Oracle JET een collectie van open source JavaScript libraries waaronder JQuery en Knockout. Deze libraries maken het ontwikkelen van applicaties gemakkelijk en efficiënt, omdat ze interactief kunnen samenwerken met andere producten van Oracle. Denk hier bijvoorbeeld aan interacties met behulp van REST, WebSocket, SSE (via JSON / XML berichten).
Oracle Jet maakt gebruik van enkele populaire Open Source libraries, zoals:

Open Source libraries View

Oracle JET is gebaseerd op JavaScript, CSS3 en HTML5. Het ontwerp en ontwikkeling van een Oracle JET applicatie kan ondersteuning bieden op het gebied van:

  • Accessibiliteit - het maken van een applicatie voor mindervaliden, denk aan een applicatie die geen muis nodig en werkt met alleen het toetsenbord. Een andere mogelijkheid is het omgaan met screen readers en screen magnifiers.
  • Internationalisatie - de applicatie kan in meerdere talen getoond worden.
  • Andere geavanceerde technische aspecten.

De gemeenschappelijke modellaag levert ook extra diensten op, zoals: filteren, sorteren, caching, paginering en virtuele scrolling. Bovendien bevat het veel UI-elementen, component validators en data converters voor data-entry.

Naast bovengenoemde heeft Oracle JET een zeer grote verzameling van Data Visualisatie UI componenten, die eenvoudig te implementeren zijn. Het onderstaande plaatje geeft een indruk van een aantal voorbeelden van deze Data Visualisatie componenten.

Data Visualisatie componenten

Mijn collega Herman Brunnekreef heeft een series blogposts geschreven over het gebruik van JET en deze componenten. Met het door Oracle meegeleverde Cookbook kan de ontwikkelaar de functionele achtergronden van alle bouwstenen zien die Oracle JET biedt. Meestal heeft een bouwsteen meerdere opties over hoe het getoond kan worden (denk aan een normale tabel, tabel met rij-selectie, tabel met scrolling). Daarnaast is er een link met de API-documentatie. Dit maakt het voor de programmeur gemakkelijk om uit te zoeken wat en hoe hij iets moet gebruiken.

Bouwstenen

Elke bouwsteen heeft twee stukken code waarmee het met knip-en-plakwerk kan worden opgenomen in je applicatie. Er is een HTML-deel en een JavaScript-deel. De onderstaande code kan bijvoorbeeld worden gebruikt om een listbox te tonen.

Listbox

Doordat Oracle JET nog vrij jong is, zijn nog niet veel implementatie-voorbeelden te vinden. Daarentegen zijn er diverse Oracle JET-enthousiastelingen die delen van hun code op het web zetten. Het Oracle JET-forum biedt daarnaast een laagdrempelige mogelijkheid je vragen te stellen. Omdat Oracle dit project goed heeft opgezet, met het Cookbook, de API’s en omdat JavaScript al jaren gebruikt wordt voor het maken van websites, ben ik ervan overtuigd dat Oracle JET een aanwinst zal worden van de Oracle-familie.

Installeren Oracle JET

Op de homepage van Oracle JET kan men de quick start template en andere voorbeelden downloaden. Handiger is om de HTML/Javascript versie van het programma Netbeans (minstens versie 8.1) te downloaden. Bij Netbeans kun je via tools > plugins, de plugin van Oracle JET downloaden. Zie ook hier voor een uitgebreid verslag van deze plugin.

Start een nieuw project en kies de "Oracle JET Quickstart Basic" template.

Listbox

Het project kan gestart worden met de groene driehoek, en de applicatie draait dan in de browser (Netbeans prefereert het gebruik van Chrome).
Oracle JET is heel geschikt voor het dynamisch ophalen van gegevens, maar in mijn voorbeeld wordt de data getoond van een statisch XML bestand. De XML-file komt van hier: http://www.w3schools.com/xml/cd_catalog.xml. Het XML-bestand moet in de root van het project (naast index.html) geplaatst worden.
Om bijvoorbeeld een simpele tabel te krijgen zoals dit:

Listbox

Plaats de volgende code in: js/modules/graphics.tmpl.html

<table id="table2" summary="Album List" aria-label="Album Table"
       data-bind="ojComponent: {component: 'ojTable',
                        data: datasource,
                        columnsDefault: {sortable: 'none'},
                        columns: [{headerText: 'Id',
                                   field: 'id'},
                                  {headerText: 'Artist',
                                   field: 'artist'},
                                  {headerText: 'Title',
                                   field: 'title'}]}">
</table>

Plaats de volgende code in: js/modules/graphics.js

define(['ojs/ojcore', 'knockout', 'ojs/ojtable'
], function (oj, ko) {
    function mainContentViewModel() {
        var self = this;
        var deptObservableArray = ko.observableArray([]);
        self.datasource = new oj.ArrayTableDataSource(deptObservableArray, {idAttribute: 'id'});
        self.addData = function () {
            $.ajax({
                url: "cd_catalog.xml",
                type: 'GET',
                dataType: 'xml',
                success: function (data, textStatus, jqXHR) {
                    var x = data.getElementsByTagName("CD");
                    for (i = 0; i < x.length; i++) {
                        l_artist = x[i].getElementsByTagName("ARTIST")[0].
                                childNodes[0].nodeValue;
                        l_title = x[i].getElementsByTagName("TITLE")[0].
                                childNodes[0].nodeValue;
                        deptObservableArray.push({
                            id: i, 
                            artist: l_artist, 
                            title: l_title});
                    }
                }
            });
        };
        self.addData();
    };
    return mainContentViewModel;
});

Dat is alles wat nodig is om deze data in de tabel te zetten.

Een ander voorbeeld is het gebruik van REST services, het updaten, toevoegen, verwijderen van data via een webservice. Kenneth Lange heeft hier een heel mooie opzet voor. Hij laat zien dat met minimale code een zeer degelijke applicatie opgezet kan worden waarbij de gebruiker zelf records kan toevoegen en verwijderen.

Zoals te zien was, is de presentatie en ophalen van data met Oracle JET heel anders dan de klassieke benadering van data uit een Oracle tabel. Met Oracle JET moet je veel zelf afvangen en definiëren, bijvoorbeeld of de data van het invoerveld het correcte formaat heeft of zijn er afhankelijkheden tussen velden. Dit is met Oracle APEX, Forms of ADF een stuk eenvoudiger te realiseren. In theorie zou de programmeur een applicatie met Oracle tabellen in het geheel met REST services kunnen realiseren, maar of dit nu de beste optie is, is aan de programmeur.

Bij Oracle JET zijn heel veel componenten al voor gedefinieerd, het is nu aan de programmeur om de bouwstenen bij elkaar te plaatsen om er een applicatie van te maken en te bedenken of deze wel de tool is voor wat hij moet bouwen.

Hoe is Oracle JET anders dan ADF en APEX?

Oracle JET ligt van alle Oracle tools het dichtst bij Oracle ADF. Maar er zijn grote verschillen:

  • Oracle JET is een toolkit met daarin o.a. een aantal JavaScript frameworks. Ontwikkelen doe je in JavaScript, bijv. met de NetBeans IDE. De applicatie draait "in de browser".
  • Oracle ADF is een JEE framework op basis van JSF. Ontwikkelen doe je in Java het liefste met de JDeveloper IDE. De applicatie draait in een JVM op de applicatieserver.
  • APEX is een geïntegreerd product / tool met zijn eigen ontwikkelomgeving. Je ontwikkelt vooral in PL/SQL en JavaScript. De applicatie draait "in de database".
  • Oracle JET is gericht op JavaScript-ontwikkelaars van medio en senior niveau.
  • Oracle ADF is gericht op Java-ontwikkelaars van beginner tot geavanceerd niveau.
    APEX is gericht op PL/SQL-ontwikkelaars van beginnend tot geavanceerd niveau.

  • Oracle JET heeft een "code centric development" paradigma (de bouwstenen zijn al gemaakt), terwijl Oracle ADF streeft naar een meer declaratieve benadering van ontwikkeling.
  • Oracle JET is een pure client-side toolkit. Oracle ADF en APEX zijn server gerichte frameworks.
  • Oracle JET zorgt voor creatie van de user interfaces, Oracle ADF en APEX zorgt voor de business service dienstverlening (connectie naar database, ophalen data, afhandelen van transacties) naast de creatie van UI laag.
  • Oracle JET data interactie is alleen via webservices, REST, WebSockets, SSE, etc. Oracle ADF en APEX ondersteunen webservice interactie met datadiensten (REST / SOAP) naast de direct binding approach.
  • ADF zorgt voor een abstractie van de onderliggende technologie. Oracle JET zit direct op de technologie. Maar deze abstractie is ook mogelijk te realiseren met Oracle JET.

Dat deze 3 ontwikkelproducten op zichzelf staan is duidelijk. Er staat eigenlijk niks in de weg voor interacties tussen deze producten. Binnen APEX wordt JavaScript meestal gebruikt voor functies die op de achtergrond van het scherm draaien, denk aan het optellen van data of het tonen / verbergen van velden. Straks is het best mogelijk dat pagina’s binnen APEX gemaakt en verrijkt worden met behulp van Oracle JET, denk hierbij aan bijvoorbeeld Oracle JET grafieken.

Dat Oracle JET voor traditionele Oracle-ontwikkelaars niet de eenvoudigste toolkit is om applicaties mee te maken, komt doordat er een gedegen voorkennis van JavaScript is vereist om de toolkit efficiënt te gebruiken. Ook is de opzet van deze toolkit niet altijd geschikt voor het maken van elke applicatie, bijvoorbeeld een applicatie die zwaar gebruik maakt van tabellen en PL/SQL. De programmeur moet zich dan gaan afvragen wat hij gaat gebruiken.

Met welke tool de programmeur moet gaan ontwikkelen hangt uiteindelijk altijd af van zijn vaardigheden en wat voor applicatie je wilt gaat maken.

Afwegingen:

  • Oracle ADF is voor de Java ontwikkelaar die een meer declaratieve ontwikkeling aanpak wil hebben op het bouwen van web gebaseerde applicatie.
  • Oracle JET is voor medior en senior JavaScript ontwikkelaars die webgebaseerde of mobiele applicaties willen bouwen.
  • Oracle APEX is voor PL/SQL ontwikkelaars. Heel geschikt voor het maken van een web gebaseerde applicatie gebaseerd op Oracle -tabellen en -packages, het is mogelijk om ook een mobiele applicatie hiermee te maken.

Listbox

Conclusie

De manier waarop de toolkit in de markt wordt gezet laat zien dat Oracle er zeer serieus mee om gaat. Dat het tevens eenvoudig is om interacties te maken met de verschillende andere Oracle producten en de vele mogelijkheden van de Data Visualisatie UI componenten, maakt dat het ook veelzijdig gebruikt kan worden. In mijn opinie kan Oracle JET een mooie toekomst tegemoet zien, maar zoals elk nieuw product moet het zich gaan bewijzen in het hectische IT landschap. 

Het is nu nog te vroeg om te bepalen of de ervaren Oracle-ontwikkelaar zich nu helemaal op JavaScript en Oracle JET moet storten. Het is zeker interessant om de JavaScript-kennis alvast te vergroten. Die kennis sowieso waardevol. En kijk ook alvast wat dieper naar Oracle JET, zodat je aan de gang kan, als er een klantvraag langskomt waar Oracle JET past.

Links

Waardering:
 

Reacties

Nieuwe reactie inzenden

De inhoud van dit veld is privé en zal niet openbaar worden gemaakt.

Meer informatie over formaatmogelijkheden

CAPTCHA
Deze vraag is om te testen of u een persoon bent en om spam te voorkomen
Image CAPTCHA
Enter the characters shown in the image.