Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

sonnyJS - A lighweight framework to create single page applications

Junior Spellweaver
Joined
Sep 5, 2014
Messages
141
Reaction score
65
Updates:
- Bumped all into 1 file
- "sy-min-max" attribute
- Extended "sy-load" with custom event listeners
- Moved many things
 
Junior Spellweaver
Joined
Sep 5, 2014
Messages
141
Reaction score
65
Updates:
- Extended "sy-action" with custom listeners
- Recoded many things
- Removed Q library
- Major design changes
 
Joined
Dec 15, 2009
Messages
1,387
Reaction score
236
I kept pressing on "Password" instead of the actual field that supposed to be pressed.

The scroller on the right should come up with a prominent color.
Also, regarding on the notifications on the top left corner of the screen, might as well implement animation effects when its been closed.
 
Junior Spellweaver
Joined
Sep 5, 2014
Messages
141
Reaction score
65
What's this comparable to?
Something minimal like Backbone or a larger framework like Angular?

Its mostly a project to learn javascript.
I heared of these frameworks but never got in touch with them so I can't tell if they're alike or not.
 
Joined
Jun 8, 2007
Messages
1,985
Reaction score
490
Hm, a super light-weight server for Node.js. It uses web-sockets instead of traditional HTTP request/response for communication from server->client or client->server. SonnyJS comes with a client-side framework with a simple API, making communication with the server not only possible, but pretty easy. The goals for this project seem identical to the goals of one of my projects, .

Keep up the good work ;)
 
Junior Spellweaver
Joined
Sep 5, 2014
Messages
141
Reaction score
65
Hm, a super light-weight server for Node.js. It uses web-sockets instead of traditional HTTP request/response for communication from server->client or client->server. SonnyJS comes with a client-side framework with a simple API, making communication with the server not only possible, but pretty easy.

Keep up the good work ;)

The real power of sonnyJS lies behind the preloader - Every page get loaded into virtual page objects and pre-rendered on the page birth, so you only cause traffic on the first page start.

Everything afterwards is traffic free (if you disabled the server communication option).


The goals for this project seem identical to the goals of one of my projects, .

You're right, seems very similar - your server is much better written:) I'll definitely give it a try!

Thanks for your feedback:)
 
Joined
Jun 8, 2007
Messages
1,985
Reaction score
490
The real power of sonnyJS lies behind the preloader - Every page get loaded into virtual page objects and pre-rendered on the page birth, so you only cause traffic on the first page start.

Everything afterwards is traffic free (if you disabled the server communication option).
SimpServe doesn't do any preloading, so great job.


I don't want to pollute your thread with stuff about my project, but I will anyway just because I want to share, lol.. I'll put this in a spoiler since the information may be considered off-topic.
The main advantage of SimpServe has got to be the fact it's extensible.

SimpServe is divided into 2 directories. The private directory is all server-side logic, while the public directory holds the assets available via HTTP.

Within the public directory lies the sub-apps. Each sub-app is given a directory. One of them may be chosen as the default, which is basically like the default index file in other HTTP servers. Using channels (powered by web-sockets), sub-apps can talk to the server. There's a weak templating engine for interacting with channels in different ways.

Within the private directory lies the configuration file, the extensions, and the channels. All extensions are functions that take the Main variable as an argument. Extensions typically add something useful to the main variable so they can be accessed/manipulated by channels and/or other extensions if necessary. Extension files are only called once, and that's during initialization. You could compare some extensions to the "model" part of an MVC architecture.

Channels are essentially part of the socket extension. You could look at channels as the "controller" part of an MVC architecture. Basically, channels are used to bind dynamic data to templates, or to submit data from a form to the server. Since channels use web-sockets, the server can send updates to the client without the client requesting an update. That means one can see some data update without taking any action from their client.

For example, if the user logs in, it sends some data over to the login.js file which holds events for that channel. Assuming the user sent correct credentials and logs in successfully, the server can broadcast that SoAndSo logged in, so that every user online can see who is online in real-time, without having to refresh anything.

Here's an example of a form in SimpServe:
Code:
<form data-channel="login" data-method="socket">
	<input type="text" name="username" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" placeholder="Username" required></input>
	<input type="password" name="password" pattern="^.{5,511}$" placeholder="Password" required></input>
	<button>Login</button>
</form>
Since the data-method is set to socket, the form will post to the data-channel instead of sending over HTTP. This is SimpServe specific. No additional scripting is needed on the public end for this to work. Instead, the login/register forms are inside of the userarea HTML element, which is listening on a channel called "userarea." When someone logs in, then "userarea::content" is updated- therefore, the forms for login/register are overwritten when a user logs in. Similarly, when the user clicks "log-out" then data is sent to the "logout" channel, and "userarea::content" becomes the login/register forms again.

So rather than using jQuery and some logic for every action, I'm using some cheap tricks. It's not very elegant, but it's a work in progress kind of.. Except progress stopped a few years ago, lol.

One downsides of going this route, is the fact I'm not preloading makes simple sub-apps very slow. For example, you can potentially have apps and sub-apps, and sub-sub-sub-sub-apps, and in many ways it's much easier than dealing with one huge HTML file with a bunch of nodes, but on the other hand, since I'm not preloading, the HTTP request count makes the process of loading a web-page very sluggish. It's not so bad if you're loading one web-app at a time, but when you try to load one web-app, which in turn has to load another two, and each of those 2 have to load 4 sub-apps.. The request count for a simple operation is very high. If I had a means of caching/preloading, SimpServe would actually be an option, and a road worth traveling down as a web-developer.

Another thing I failed at was documentation. My documentation really falls short at describing how to use SimpServe. I should've created more examples, more documentation, and made it easier for people new to node.js to jump right in and get started.

Finally, I should've created this project in such a way that somebody could install it via npm. Since the framework comes with specific directories and what-not, and since SimpServe isn't simply a library like express, installation of SimpServe is different than installation of a traditional node.js package.

By the time I noticed these drawbacks, it was overwhelming to go back and redesign everything, and I probably had other projects I was working on, so I gave up on SimpServe. I still use it for many of my node.js projects as a starting point, but I'm not trying to get anyone else to use it anymore.

Hope this helps you with your project.
 
Junior Spellweaver
Joined
Sep 5, 2014
Messages
141
Reaction score
65
Updates:
- Several fixes
- Added infinite html template inheritance
- Fixed circular template inheritance
- Code optimizations

Starting soon on the websocket connection
 
Last edited:
Junior Spellweaver
Joined
Sep 5, 2014
Messages
141
Reaction score
65
Updates:
- Cross window communication
- Browser history manipulation to bring back the functionality to browser's back and forward buttons
- Template nesting
- Improved template routing
 
Junior Spellweaver
Joined
Sep 5, 2014
Messages
141
Reaction score
65
Updates:
- Dynamic variable print in HTML
- Multiple language support
- Updated documentation
- Updated website
- Many improvements and changes
- External json configuration file
 
Junior Spellweaver
Joined
Apr 26, 2013
Messages
137
Reaction score
153
Awesome! Perfect for multi-language websites for switching between different languages without annoying reload (blink) of the whole page :)
 
Back
Top