Book Jar is an electronic library powered by XML as a data source storage , validated with an XSD and processed via XSLT to ouput it in a JSON format that Javascript uses afterwards in rendering, it provides a minimalistic sleek user interface with a subtle library theme. Users can browse a collection of books that are generated from one XML file that holds the books hierarchy.
-
Authors:
Zakaria Ouadrhiri Idrissi Azzouzi&Anas Ait El Kouch -
License: MIT License
-
Website: https://bookjar.educationhost.cloud/
- Fallback : https://nervous-jang-7fa29c.netlify.app/
-
Git clone: https://github.com/zackautocracy/BookJar.git
- An easily searchable library with a good SPA experience (Single page application)
- Conjuring the power of Javascript instead of conceiving a Backend architecture
- Convenience when adding Data , no dabatabase needed , storage rely solely on
books.xml - Fast data generation from XML via XSLT , revealing a versatile data format baked specifically for APIs (JSON)
- Book Search is keyword based instead of strictly matched. No you don't need to remember the exact name to find your book again.
- A big collection of books and their ratings to browse just for you.
- Search by Author name and/or Book Title name
- The App uses Handelbars (Template Engine for Javascript) to display books with their respective data It's already added via a CDN , make sure to run it while you're connected to the internet though.
- You need an XSLT Processor in order to generate the JSON file , for more infos on how to install such a tool checkout this resource
After cloning the repository you should have the following file tree :
Public directoryhas the files that should be public to be hosted and contains :-
index.htmlan HTML file with the HandleBars template used in a script tag withtype="text/x-handlebars-template" -
CSS directorycontains all the stylesheets used by the app. -
JS directorycontains modules of helper functions that are imported inmain.jsthat contains the logic of the app. -
Data directorythe warehouse of the app it has thebooks.xmlfile (contains books) ,books.xsd(contains the schema),xml2books.JSON.xsl(contains the stylesheet) andbooks.json(contains the output target in JSON format) tailored specifically for API usage. -
Img directorycontains images that represent book covers.
-
All books are contained in a single <books> root node rather than storing
each book file individually.An Approach that doesn't scale much.
A document that respects xml syntax is called a well formed xml document, Although the syntax is less flexible than HTML it's still exposed to data corruption resulted from the loss of data integrity. That's why we need to define a set of rules that are more explicit about what XML file structure is valid for our usage. Hence the name of a valid XML document.
Use the official W3C validator.
A choice we made while designing the app, we could use XSLT templates directly to generate our HTML in the browser (yeah you nailed it !!The browser also contains a XSLT Processor too based mainly on XPATH). The problem with this approach is the scalability and the usability of the App. In a world dominated by Javascript libraries and APIs , The ideal format for data transfert is JSON.
Use xml2booksJSON.xsl, it's a powerful xsl template that can generate
a JSON format from any given XML file.(So cool !! Isn't it)
Make sure to have a XSLT processor installed to generate the JSON file I mainly use the default XML plugin in PHPStorm that supports XSL transformation You can you use the official XSLT processor by Saxon
The app has some javascript code that loads the generated JSON file automatically. And now you can see our little library updated. And all that in no time. Hail to JSON !!!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent