BillStephenson
Posts: 248
Joined: Thu May 17, 2012 1:25 am
Location: SW Missouri Ozarks
Contact: Website

Serverless Web Apps on the Pi

Mon Sep 18, 2017 12:01 am

"2Doosey" is a fairly simple "Todo" app that runs in your web browser.

You can try it here:

https://cherrypc.com/todo/index.html

The app demonstrates these features:

Using HTML/CSS/Javascript only to build a feature rich app.
Using "App Cache" for "Offline First" capability.
Using PouchDB.js to store user data in a web browesr's built-in database.
Using jQuery.js and jQueryUI.js to add some nice features to the UI/UX.
Using Bootstrap to add "Mobile First" features.

After you use the app go ahead and disconnect from the web and load the url again to demonstrate offline use.

You can download the app code and dependencies here:

https://cherrypc.com/todo.zip

I downloaded the above linked zip file and unzipped it on my Pi 3. I moved the "todo" directory to "home/pi/todo" and opened it in the Chrome web browser by entering "/home/pi/todo/index.html" and it worked without needing a web server installed. Gotta like that!

There are only two app files used:

todo/index.html
todo/js/todo.js

Documentation for all the APIs used, and more, can be found with these links:

https://pouchdb.com
https://getbootstrap.com/docs/3.3/
https://jquery.com
https://jqueryui.com

Together, these tools provide a fairly complete "framework" with a practically seamless API for building feature rich apps, and they only take about 3.1 MB of disk space. You also benefit from a strong support base when using them and you can toss in other great Javascript libraries to add features as needed. Obviously, other Javascript Frameworks can be used too. I chose these because they're so well documented and there's so much great example code and support online.

Adding Local and Remote Servers
This demo really only scratches the surface of the potential of this approach. With jQuery you have AJAX features builtin to grab remote data and with PouchDB you're just a couple steps away from syncing all your data to a local or remote CouchDB server and you can install CouchDB on a Pi too. Shoot, from there, you can even add more Pi running CouchDBs in a "Cluster" with a load balancer, and it's got tools builtin to make even that easy.

This is a very different approach than the old "LAMP Stack" way of doing things and those tools make it easy to learn and start making things. At least for me they have.

Heater
Posts: 7926
Joined: Tue Jul 17, 2012 3:02 pm

Re: Serverless Web Apps on the Pi

Mon Sep 18, 2017 8:43 am

Interesting.

This appcache test page here http://www.der-schepp.de/appcache-default-size/ says I have over 256MB of appcache storage available and has declared it is actually unlimited. In Chrome that is.

Of course one does not need jQuery to make AJAX calls. Just use the browser's XMLHTTPRequest.

I would not be using jQueryui either. There are much nicer ways to make a GUI in the browser now a days. I like react.js.

On the other hand bootstrap is a wonderful thing. Gets rid of most of that hassle with the heinous mess that is CSS. And as you say adds the responsiveness to your layouts required for small mobile screens.

Of course you now have an app with storage but it is isolated from the rest of your machine. No interaction with GPIO or whatever you may like to do. But with the new bluetooth API for browsers https://webbluetoothcg.github.io/web-bluetooth/ one could perhaps rig up some kind of link to real hardware.

For more than that you are going to have to run your webapp under Electron.

Does anyone use the old fashioned LAMP stack anymore? That is so last century.

Everything web oriented I have been doing for many years now has used node.js on the server end and communicating with the browser in real time using websockets.

BillStephenson
Posts: 248
Joined: Thu May 17, 2012 1:25 am
Location: SW Missouri Ozarks
Contact: Website

Re: Serverless Web Apps on the Pi

Mon Sep 18, 2017 2:56 pm

I played around with React.js and Node.js a bit but ended up feeling that it wasn't worth the effort to install and learn everything needed to get started. jQuery still offers a lot of great features and a consistent API with great documentation and there's tons of example code out there to help out when you need it. So it was easier for me to get things done with.

Lately I've been reading that some projects are ditching React.js because of patents and licensing issues. Wordpress is among the most notable. I want to stay with completely open source and "free" tools after having been bit by licensing and pricing and death of product issues in the past. Remember the Unisys "GIF" patent? I got bit hard by that, though they were actually very helpful and gracious in resolving it.

The little bit of work I did with Node.js left me a bit befuddled. It's kind of like a server, but not. Seemed like any little error caused it to stop running. I'm sure there are reasons for that (my crappy code) and ways to deal with it but it left me feeling it was way too finicky, and again, I didn't want to invest in all the learning to do it their way. I just don't see the benefits outweighing the cost right now. They may come when you scale up but I don't need to worry about "millions of users" on any of the projects I work on and if one ever did close in on that mark I'd probably be in a much better position to deal with it than I am now.

I still mostly use Perl for server side functions. In the apps I'm making now I use it for sending email, tracking email, and setting up user accounts. I've played with websockets using the Python "Tornado" libraries and that's pretty cool stuff. I do want to work with that some more.

I think I've mentioned it before, but I did spend a bit of time at http://todomvc.com going over their tutorials. That was a great way for me to learn about some of the new frameworks out there but I came away baffled over which was "best" and struggled with making a choice. I finally decided to instead consider which was "easiest for me" and that led me to consider the choices shown above so I decided to make a "Todo" app with those and found it much easier for me to be productive with those tools. That may not be the case for everyone, but it is fair to say that those tools are very easy to use and offer a very rich feature set when combined.

I'll tell you what really interests me right now is using a Pi to deliver an application as opposed to a web app (SaaS, PaaS, etc.) or an app you install. I've been playing with that a bit and it seems to me the potential there is immense. The end user can use it as a standalone PC or connect it to their LAN and use it as an app server, and/or connect it to the internet. The apps I'm making, for example, could do much more for the user if they ran off a Pi in-house. They could be customized just for their use by anyone who can use those tools and they would "own" the changes which would increase the value, efficiency, and lifetime of the asset.

Heater
Posts: 7926
Joined: Tue Jul 17, 2012 3:02 pm

Re: Serverless Web Apps on the Pi

Mon Sep 18, 2017 6:27 pm

Bill,

We are talking two things here. Server side and browser side.

At the server end node.js is super simple to install. Just download the thing from here https://nodejs.org/en/download/current/ and away you go. You could just install it using apt-get but sadly the version is way old.

Node.js is not a server. It's a run time for Javascript. It can be used for all kind of programming. Like using Python or Perl but better. It is especially usefull when you are having to juggle a lot of I/O: sockets, MQTT, HTTP, serial port, GPIO, files, mail, messaging API's, etc, etc. Its event driven programming model makes hadling all of that much easier. I would not suggest using node.js for heavy, long running calculations though.

However, it is also super simple to make a web server in node.js. Can be just a handful of lines of code. Especially if you use the express module to help. With a few more lines you have it serving web sockets as well.

On the client side, the browser, you are right. The JS library/framework world there is insane currently. There are hundreds of them. Seems like new ones come every day.

React can be very simple. But the docs and tutorials push you towards needing a ton of complexity. Like needing webpack to build your JS into a bundle because they use JS module syntax which is not supported in browsers yet. Which in turn requires bable to transpile that ES6 syntax. Jees it's Javascript, how come I end up waiting for it to compile and build stuff every time I change something?

I too have started worrying about that React patent clause. It's unlikely to ever effect me but it's shitty. I'm actively looking for an alternative.

Perhaps VanilaJS is the way to go http://vanilla-js.com/

I think Pi delivered apps is a great idea.

samuel9
Posts: 1
Joined: Mon Sep 25, 2017 8:19 am

Re: Serverless Web Apps on the Pi

Mon Sep 25, 2017 8:23 am

Node.js is not a server. It's a run time for Javascript. It can be used for all kind of programming. Try this tool: Javascript obfuscator

Heater
Posts: 7926
Joined: Tue Jul 17, 2012 3:02 pm

Re: Serverless Web Apps on the Pi

Mon Sep 25, 2017 9:07 am

Try this JS obfuscator:

http://www.jsfuck.com

Put this in:

Code: Select all

c = a + b
Get this out:

Code: Select all

[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]](([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(+[![]]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+!+[]]]+([]+[])[(![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(!![]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]()[+!+[]+[+!+[]]]+(+[![]]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+!+[]]]+(![]+[])[+!+[]]+(+[![]]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+!+[]]]+(+(+!+[]+(!+[]+[])[!+[]+!+[]+!+[]]+[+!+[]]+[+[]]+[+[]])+[])[!+[]+!+[]]+(+[![]]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+!+[]]]+(+(+!+[]+[+!+[]]))[(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(+![]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(+![]+[![]]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]](!+[]+!+[]+[+[]]))()
Much better.

Return to “Other languages”

Who is online

Users browsing this forum: No registered users and 1 guest