Building a minimal client-side guest-list app.

Elliott, Eric (2014-06-26). Programming JavaScript Applications: Robust Web Architecture with Node, HTML5, and Modern JS Libraries (Kindle Locations 3305-3306). O'Reilly Media. Kindle Edition.

To demonstrate, take a look at how you might build a minimal client-side guest-list app (just in case you need a bouncer at your birthday party).

If you want to build a Node app, one of the first things you’ll need to do is create a server. One of the easiest ways to do that is to use Express, a minimal application framework for Node.

Developing a client-side guest-list app sans framework.

Find "javscript-guest-list-tutorial" here.



In [1]:

    
from IPython.core.display import display, HTML
from meta import (
    define_website,
    video_map,
    keys,
    url,
)



In [2]:

    
define_website









    Out[2]:




  
  Q: What is the is the difference between websites and web apps? @sodimasolutions I just read your FAQs. Thanks for the excellent answer. You point out an important distinction that I easily missed.
 A photo posted by Don M (@dmmfll) on Jul 29, 2016 at 7:49am PDT

static versus dynamic websites

It seems to be a question of what and at what point HTML, JavaScript, and CSS file creation occurs and not what the website (web application) does.



In [3]:

    
# from a package I wrote: https://github.com/dm-wyncode/pynotebook-youtube-editor
from youtube_editor.youtube_editor import (
    get_embed_string_from,
)



In [4]:

    
for key in keys:
    display(HTML(get_embed_string_from(video_map.get(key), url)))









    




Separations of concerns is not valid with HTML, JS, and CSS.
start: 00:06:42
end: 00:08:32








    




Dividing HTML, JS, and CSS is completely nonsensical.
start: 00:09:18
end: 00:11:56



In [5]:

    
html = get_embed_string_from(video_map['entire video'], url)
display(HTML(html))









    




The entire video.

A meaning for "dynamic" and "static" depends on context.

A set of statically produced files can still have dynamic behavior in a browser context thanks to CSS and JavaScript.

And a collection of static files can be served up by a variety of static HTTP servers.

Indeed the client-side code for the guest list application functions the same no matter what HTTP server is serving up the files.

The language in which the file server is invoked has no bearing on the app! I know this sounds silly; and I know I used to be confused by this; and I know others still are still confused by this by the things they say about building websites!

starting an HTTP server in Python, NodeJS, and Ruby

Using any one of these commands results in the same behavior of the guest-list app. Just because an app is writen in JavaScript does not mandate that the server speak JavaScript. (Though there can be advantages to that case.) A server only needs to know how to deliver the content of files.

Starting web servers in many environments.

Python 2

at the command line

python -m SimpleHTTPServer 8000

In a module (script):

import SimpleHTTPServer
import SocketServer

PORT = 8000

Handler = SimpleHTTPServer.SimpleHTTPRequestHandler

httpd = SocketServer.TCPServer(("", PORT), Handler)

print "serving at port", PORT
httpd.serve_forever()

Python 3
- at the command line
```
python3 -m http.server
```
(Python) Twisted
- at the commmand line
```
twistd -n web -p 8000 --path .
```

Node.js

at the command line

npm install -g http-server   # install dependency
http-server -p 8000

Ruby
- at the command line
```
ruby -run -e httpd . -p 8000
```

Notes to self.

express framework server

Using express server to serve the app in development. I am not, however, taking advantage of any "framework" features. I am just using it to serve up static files. Any of the above commands serve the same purpose.
https://expressjs.com/

Resources
- https://github.com/dm-wyncode/simple-express-static-server
  
  steps
  - download the server.js file
  - nodejs server.js
Had to set up server.js to serve up static files. See server.js code here.
- https://expressjs.com/en/starter/static-files.html

qunit testing

How to use it. See example here.

unexpected behavior: The tests fail even though the elements are rendered in the page. It seems that the test is not waiting for the page to finish loading before firing so element length is 0.

This was solved by moving all of the variable definitions inside of the QUnit tests where QUnit takes care of waiting for the document to be ready.

write some code into src

This is the code i.e "the app" tested by QUnit See the src code here.

grunt to collect all the code together into app.js

Still have to manually run browserify src/app.js -o public/app.js to compile code.

Haven't figured out gruntfile.js yet to do that.

Thought: A browser is not required to test and develop client-side web apps.

Why is this client-side guest list an app?

It has a model albeit statically stubbed out with guestlistmodel.js. A database could be plugged into here which would make an app dynamic with create, update, delete of CRUD capabilities. For now, I am doing myself a favor by using fixture data with read-only capabilities.

app.js is where the action is. It imports the exports from modules and creates the guest list using jQuery via jquery-browserify.

In this case, you’ll separate presentation concerns from data management. The data will come from a stubbed model module named guestlistmodel.js. For now, it will just return some hard-coded names.

Elliott, Eric (2014-06-26). Programming JavaScript Applications: Robust Web Architecture with Node, HTML5, and Modern JS Libraries (Kindle Locations 3396-3398). O'Reilly Media. Kindle Edition.

Browserify

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.

QUnit

QUnit was originally developed by John Resig as part of jQuery. In 2008 it got its own home, name and API documentation, allowing others to use it for their unit testing as well. At the time it still depended on jQuery. A rewrite in 2009 fixed that, and now QUnit runs completely standalone.

Qunit tests can be run either in a browser or at the command line.