CODEWITHSUNDEEP
javascriptarchitecture
shrewdbeans
shrewdbeans

Reputation: 12549

How to plan the structure of a new JS application

I am about to start a project to create an app for the Apple TV, using their Client-Server App technique. The app will be written in Javascript and will handle the loading of XML template views (called TVML) using Apple's JavaScript API (called TVJS).

Their code example is very basic; just a single file with some functions for loading a template, handling a single click event, etc...

In other projects I've worked on, I've had the luxury of using an already predefined structure, for example I built an iOS app using Appcelerator Titanium which came packaged with it's own documented MVC framework.

However, now I'm out the wild on my own and I need to think about how to set up an application structure in pure Javascript.

Can someone advise me on where to start on creating an application file and code structure? I am struggling to find beginner tutorials online.

Please also feel free to edit this question if you feel that it can be asked in a more eloquent way to help people who stumble across this question.

Upvotes: 0

Views: 242

Answers (2)

SerkanSerttop
SerkanSerttop

Reputation: 588

Anything you want to try out, play around with the TVMLCatalog sample code Apple has provided.

To architect an app, basically you need to think about 2 roles, one is the view side (templates), and the other is the event handling (Presenter.js example).

Make a generic document loading function, try to use it as much as you can. Whenever an event is fired, use some if/else block or a switch statement to figure out what to do.

I have added all the necessary code for the Presenter side, I think if you know JS, it should be easy to figure out the rest.

defaultPresenter: function(xml) {
    if(this.loadingIndicatorVisible) {
        navigationDocument.replaceDocument(xml, this.loadingIndicator);
        this.loadingIndicatorVisible = false;
    } else {
        navigationDocument.pushDocument(xml);
    }
},
addEventsToDocument: function(doc){
    doc.addEventListener("select", this.load.bind(this));
    doc.addEventListener("play", this.load.bind(this));
    doc.addEventListener("highlight", this.load.bind(this));
    doc.addEventListener("holdSelect", this.load.bind(this));
    doc.addEventListener("change", this.load.bind(this));
},
buildCompilationTemplate: function(params, data) {
    var resource = TemplateCompilation(params, data);
    this.buildDefaultTemplate(resource);
},
buildDefaultTemplate: function(resource) {
    var doc = this.makeDocument(resource);
    this.addEventsToDocument(doc);
    this.defaultPresenter.call(this, doc);
},
load: function(event) {
    var self = this,
        ele = event.target,
        navigateTo = ele.getAttribute("navigateTo");

    if (navigateTo !== '') {
        if (event.type !== "select"){
            return;
        }
        if (navigateTo === 'Compilation') {
            var params = ele.getAttribute('params');
            fetchCompilationService(params, function(data) {
                self.buildCompilationTemplate(params, data);
            });
        }

Responding to the question coming from a comment about non-presenter code structure:

The way to load scripts currently is with evaluateScripts function, there is no import or require mechanism. Although one could probably write a tool to make them work.

Therefore the only option currently is to use gulp / grunt to concat js files. You could specify the ordering of your js files in your gulp script, and build a single js file to deliver. My preference would be as follows:

app.js
js
  API.js
  services.js
  vendor
    async.min.js
resources
templates
  home.xml.js
  episode.xml.js
  most-popular.xml.js

Main entry point is the app.js file, it has app specific configurations and calls the template, event setup, etc.

error.js file contains some error handling function that I use in all my apps. Basically some alertTemplates.

API.js file has service-specific configuration functions.

service.js file where I make all the AJAX calls using the API.js abstractions.

This type of setup worked well enough for me.

You can concat and minify all these files with gulp and just reference that file from your xCode project.

Upvotes: 1

Rachoac
Rachoac

Reputation: 112

100% suggest using React + Redux: http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

I've built several new projects using this template relatively quickly.

Upvotes: 0

Related Questions