Welcome to FuncyTown
I've been thinking...
To generate one web page or one web component, why must I use (at least) three
distinct files (HTML, CSS, & JAVASCRIPT) and use (at least) three distinct
languages (HTML, CSS, & JAVASCRIPT)?
That's too much context switching for my simple little mind!
FuncyTag & FuncyStyle allow all components of a web page (HTML, CSS, and Javascript) to be generated from one purely functional Javascript source. HTML and CSS are mapped clearly to Javascript, but without losing their flavor. The result is easy to read, easy to write, easy to bundle, easy to reuse, and (hopefully) kind of boring.
Contents:- The four components of FuncyTown
- A simple example
- What's coming next to FuncyTown?
- Theme song
- More information
The four components of FuncyTown
The four components of FuncyTown (leaving out a lot of details) are:
1) HTML source code as Function calls (think “functions instead of tags” or “rounded brackets, not angle brackets”)
Assuming that you have defined FuncyTags "p" and "span" to represent their plain HTML equivalents (more on that later), this sentence:
could be defined by this FuncyTag-using javascript:
For comparison, here is the generated HTML:
2) Creating Custom “funcy” tags
New FuncyTags can be defined by inheriting and extending the charateristics of other tags.
The following creates new tags “red” and “big” to generate exactly the same HTML output as the previous example:
3) Inline event handlers (e.g. onclick, onblur, etc… and adding oninit and onterm)
Event handlers can be coded directly within the FuncyTag definition. This applies to all of the standard DOM element methods beginning with “on” (for example, onblur, onclick, onfocus, etc...) and adds the extra options “oninit” and “onterm”.
In the following example, the “big” tag is replaced by a “fluffy” tag that reacts to “onclick”, and also initializes animation at “oninit” time.
resulting in the following:
4) CSS stylesheets defined as Javascript function (i.e. “FuncyStyles”).
The previous examples embedded the CSS information within the attributes of a FuncyTag. For CSS information shared across multiple elements it is much more common to use stylesheets. FuncyStyle allows these stylesheets to be defined directly in Javascript, so stylesheets fit right in with the other JavaScript and and FuncyTag code.
For example, the old “peeps” line could be generated with this source code that uses FuncyStyle:
resulting in the old familiar, colorful statement:
because the “funcyStyle” call generated and injected this CSS stylesheet:
and the “p”, “span”, and “i” FuncyTag methods generated this HTML:
Disclaimer: FuncyStyle is in a state of flux. Originally it was more SASS-like, then I thought “why not just let people use LESS directly, since it's already JS” but then I realized LESS is easy enough to reproduce so it works better with FuncyStyle, and then I thought a little bit of SASSiness I liked should be added, and now I'm not sure what to think. So the current documentation and samples really peter out for FuncyStyle because I'm far from done with those.
A simple example
Suppose you're building a web page that will dynamically create html for a collection of animals retrieved via AJAX. You want each animal to be represented by HTML such as this:
Just to get a feel for how Javascript “funcy tags” map to a HTML tags, here is how to render the same output from server-side FuncyTag:
A traditional client-side Javascript function to create his HTML, based on some parameters that probably came from AJAX, would look something like this:
A FuncyTag implementation to create the same HTML from within client-side Javascript could look something like this:
So what? Should I be impressed?
Not really. This is pretty simple stuff, and that's kind of the point: making stuff as simple and boring for the javascript writer as possible.
There's nothing super novel about noticing the similarities between begin/end tags
and the open/end parenthesis on a function call (i.e. <div>...stuff...</div> versus div(...stuff...), or similarities between html tag attributes and properties
of a javascript object. That's been done a lot of times. Although I think it's kind of keen to represent
style="font-size:14px" as cssFontSize_px=14 because doing so has saved me a lot
of tedious string concatenation code.
What's coming next to FuncyTown?
- lots more documentation (tutorials and NOTE THATS) and many more examples (real-time stylesheet changing, FuncyStyle mixin and inheritence, my favorite img-tag onerror reoloader)
- get feedback to see if this project is worth pursuing
- compare/contrast with similar projects, determine if it's better to switch to or collaborate with them (e.g, jhtml, jaml, eSugar, js2dom, html-sourcery, Elephactory, RML, sugar_dom, and especially the new ojjs)
- explore new color() to decide if it's useful or just silly
- determine if the python version should catch up to the javasript version, or be abandoned
- demonstrate some PAJAX pages where entire pages are results of loading funcytag/funcystyle
- figure out how mediaqueries should tie into FuncyStyle
- add server-side tools to the github project, including node package for easy nodejs integration -- and then some nodejs examples
- release tool to convert existing HTML+JS+CSS files into single, readable JS file
- compare FuncyTag elements with HTML5 custom elements (including x-tag) and Web Components
- show how to tie into reactive MVC frameworks (e.g. AngularJS)
- provide helper function to populate global space with all standard tags
- in debug mode, validate against improper html use (e.g. including a <p> inside a <b>)
- complete the "big picture" by showing how server can be totally abandoned by relying on just a JS-delivery/storage DB (e.g. Firebase)
Theme Song
More Information
- step-by-step online tutorial examples - these running examples teach more than any documentation could
- Documentation & Tutorials
- github project