Newbie question: choosing a UI

[Scott Alexander]

Hi -

I'm new to NodeJS and trying to put together a stack for small
database deployments (could be a single-page rich-client app), so I'm
looking at databases that work well with NodeJS (eg, Redisql, Riak)
and frameworks (eg, Express) - plus stuff like Connect and
StreamlineJS..

Now I'm trying to choose some good tools for the client-side user
interface (eg, JQuery, YUI, ExtJS)

Does the choice of database and framework have any impact on the
choice of UI?

I'm leaning towards ExtJS because I'd be doing fairly data-intensive
apps, and ExtJS has a lot of things I like (sophisticated datagrids
with sorting, pagination, custom cell renderers/editors such as combo-
boxes and calenders, plus a visual designer).

But looking around on the web, I don't see much mention specifically
about NodeJS and ExtJS being used together.

Maybe this is just because any client-side user-interface framework
only involves JavaScript running on client, getting and posting JSON
back and forth to the server, so I can pretty much mix and match any
client-side UI framework with NodeJS. (I know that

Is this correct?

Does anyone have any preference or suggestions regarding a nice client-
side UI that works well with NodeJS?

I guess I'm worried that the functionalities of ExtJS might somehow
overlap the functionalities of Express or Connect.

ExtJS does a lot of stuff:

http://www.sencha.com/products/extjs/whats-new-in-ext-js-4/

and I'm not sure if any of this stuff might duplicate or get in the
way of what NodeJS and its other modules do.


Thanks for any help.

[Clint]

Really, there's no such thing as a front-end framework that "works well" with any server... I mean, the server simply produces HTML.  What the browser does with that HTML is just a question of what files you serve with that HTML.

When you talk about a user interface, the choice of server is (generally) irrelevant.  From your question, I get the sense that you haven't had a lot of experience with some of the more advanced front-end concepts.  If I were you, I'd mock up precisely what you want in the front end, using either good 'ol fashioned paper or Balsamiq, and then choose a front-end framework (if it's even necessary) that fits your needs.

Remember: you don't have to use a front-end framework.  The web worked just fine without them before, and they can still.  It's better to know what you want to render first, then find a tool that works, if you even need one.

That said, Node will serve you well in the respect that you'll be exploring a lot of JavaScript-based frameworks, and a lot of the event-driven knowledge from Node will serve you well, (and vice versa).  You'll probably be killing two learning birds with one stone?  I would find another Google Group for front-end development and chat there about what framework might suit your needs, and would teach you the most.

Hope this helps... best of luck to you!

[Miloš Rašić]

You are absolutely correct in your assumption that you can mix and match. Personally, I'm using Appcelerator Titanium Desktop with jQuery on the client side with PHP and NodeJS on top of MySQL database and I don't see how there could be any problem between any combination of server-side and client-side technologies.

I also have to disagree with Clint about the idea that server simply produces HTML. In my case, the server only produces JSON encoded data. This particular detail is a very important choice you have to make when picking a client-side library or framework. With ExtJS or SproutCore frameworks you certainly won't be generating much HTML on the server. jQuery and YUI are libraries and thus much lower-level and more flexible, allowing you either generate HTML on the server or simply generate JSON or XML data and create HTML on the client. If you wish to use a higher level framework with HTML generated on the server, JsMVC or ukijs might be more "HTML friendly".

--
Job Board: http://jobs.nodejs.org/
Posting guidelines: https://github.com/joyent/node/wiki/Mailing-List-Posting-Guidelines
You received this message because you are subscribed to the Google
Groups "nodejs" group.
To post to this group, send email to nod...@googlegroups.com
To unsubscribe from this group, send email to
nodejs+un...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/nodejs?hl=en?hl=en

[Jorge]

I wonder what will happen to google and to the web as we know it (and to us too !) when most pages are becoming non-indexable web-apps whose contents is nothing but a mere script src='blah-blah' tag.

How are we going to find things in the web, then ?

-- 

Jorge.

[Joe Developer]

Google has that part covered, see http://code.google.com/web/ajaxcrawling/docs/getting-started.html

[Joe Developer]

This also touches on the original thread question. 

While it is true that traditionally the front end ( JSON consuming JS app ) could care less about the backend, some of the things coming out of the YUI team seems to change that, or alteast offer compelling benefits to choosing one backend stack vs another. 

Running YUI on node.js in the server means that you can render your 'single page app' states on the backend and send them as pure html if you wanted - such as to cater to google indexability, or to deliver fast initial loads to empty client caches - or to be able to offer good performance on less capable clients / networks. 

[Miloš Rašić]

A web app in contrast to a web site is usually something you need an account in order to use because it saves some of your personal data, so it is not public and thus not indexable anyway. For example, you can search for "timekraft" on google and it will give you timekraft web app, but you can't search your own or someone else's tasks this way. Since Scott is leaning towards ExtJS I assume his is trying to make an application.

Anyway, I doubt web will ever become all web apps.

[Miloš Rašić]

I don't understand this. Why does backend matter to YUI? Are you saying that it didn't always support fetching html from the server and inserting it into the document? Even if it didn't, why should this make the backend matter?  Any language considered a web programming language can generate html output. You can even make your server-side application as a compiled Apache module if you feel like it.

[Joe Developer]

The backend doesn't matter to YUI - but YUI can be the backend :)

See: 

Project page: http://yuilibrary.com/projects/nodejs-yui3/ 

Intro + old examples which may not have been kept up to date: http://www.yuiblog.com/blog/2010/04/09/node-js-yui-3-dom-manipulation-oh-my/
A number of videos on YUI Theatre such as: http://www.yuiblog.com/blog/2011/06/09/video-f2esummit2011-glass/

What this means is that you can have your full js app, but serve it up as straight html if you see reason to, and all kinds of other goodies as well. 

HTML is so last paradigm though :p

--

[Scott Alexander]

Hi Jorge -

I hear what you're saying - single-page web apps using a heavy UI
framework such as ExtJS are difficult or impossible for crawlers to
index.

Actually I didn't clarify that I would do single-page web apps only
for internal intranets - just as a way of offering a convenient zero-
footprint, zero-install client. For public-facing sites, I agree that
simpler, more lightweight HTML is better - from the point of view of
crawling, accessibility, SEO, etc.

Thanks!

On Jul 15, 7:23 am, Jorge <jo...@jorgechamorro.com> wrote:
> I wonder what will happen to google and to the web as we know it (and to us too !) when most pages are becoming non-indexable web-apps whose contents is nothing but a mere script src='blah-blah' tag.
>
> How are we going to find things in the web, then ?
> --
> Jorge.
>
> On 15/07/2011, at 12:12, Miloš Rašić wrote:
>
>
>
>
>
>
>
> > You are absolutely correct in your assumption that you can mix and match. Personally, I'm using Appcelerator Titanium Desktop with jQuery on the client side with PHP and NodeJS on top of MySQL database and I don't see how there could be any problem between any combination of server-side and client-side technologies.
>
> > I also have to disagree with Clint about the idea that server simply produces HTML. In my case, the server only produces JSON encoded data. This particular detail is a very important choice you have to make when picking a client-side library or framework. With ExtJS or SproutCore frameworks you certainly won't be generating much HTML on the server. jQuery and YUI are libraries and thus much lower-level and more flexible, allowing you either generate HTML on the server or simply generate JSON or XML data and create HTML on the client. If you wish to use a higher level framework with HTML generated on the server, JsMVC or ukijs might be more "HTML friendly".
>

[Scott Alexander]

Hi Joe -

Yes I saw this video by Dav Glass where he was excited about running
YUI on NodeJS, allowing server-side page rendering which opens up
possibilities among the ones you mentioned: google indexing, less-
capable devices. This is an interesting angle and I will keep an eye
on it.

Thanks!

On Jul 15, 7:32 am, Joe Developer <joe.d.develo...@gmail.com> wrote:
> This also touches on the original thread question.
>
> While it is true that traditionally the front end ( JSON consuming JS app )
> could care less about the backend, some of the things coming out of the YUI
> team seems to change that, or alteast offer compelling benefits to choosing
> one backend stack vs another.
>
> Running YUI on node.js in the server means that you can render your 'single
> page app' states on the backend and send them as pure html if you wanted -
> such as to cater to google indexability, or to deliver fast initial loads to
> empty client caches - or to be able to offer good performance on less
> capable clients / networks.
>

[Scott Alexander]

Hi Clint -

Thanks for this perspective. I had heard of wireframing tools and I
will look some more into them.

I have experience building database apps (that run native on Windows)
and now I'm looking to do database apps that run in a browser. Layout
has always been somewhat baffling to me, since I have no background in
HTML or CSS. Since database apps don't have to be all that exciting,
and since I'm kinda lazy, I'm hoping I can find web-app-oriented
framework that takes much of the work out of generating a working (if
ugly) CRUD app, using default layouts where I hopefully don't have to
meddle too much with the (generated?) HTML and CSS.

Anyways, from what I'm hearing on this thread, people seem to be
confirming that the client-side UI framework can pretty much be chosen
independently of the server-side web framework. So I'll attempt to use
the two which have seemed most appealing to me so far: NodeJS for the
webserver, and something like ExtJS 4 (plus the Visual Designer for
ExtJS 3, soon to work with ExtJS 4 as well), as a way of mocking up
simple database forms.

Thanks!

On Jul 15, 4:21 am, Clint <cl...@clintandrewhall.com> wrote:
> Really, there's no such thing as a front-end framework that "works well"

> with *any* server... I mean, the server simply produces HTML.  What the

> browser does with that HTML is just a question of what files you serve with
> that HTML.
>
> When you talk about a user interface, the choice of server is (generally)
> irrelevant.  From your question, I get the sense that you haven't had a lot
> of experience with some of the more advanced front-end concepts.  If I were

> you, I'd mock up *precisely* what you want in the front end, using either
> good 'ol fashioned paper or Balsamiq <http://balsamiq.com/>, and then choose

> a front-end framework (if it's even necessary) that fits your needs.
>

> Remember: you don't *have to use* a front-end framework.  The web worked

[Scott Alexander]

Hi Miloš -

Yes you're right, I do expect I will just be generating JSON on the
server, and letting the client-side weave that into some sort of
presentation - I assume letting ExtJS manipulate the DOM. (It looks
like it will be easier to use the DOM to render a page rather than
templates - as the DOM is already "parsed" into a meaningful tree
structure whereas templates seem to be a monolithic chunk of text.)

There is another UI framework, which I think was forked from some
earlier version of ExtJS, called Isomorphic SmartClient - but I don't
think its advanced data-handling features (which involve server-side
processing in Java) would have any applicability using NodeJS, so the
right now I'm leaning towards ExtJS for developing "rich" database
browser clients.

Thanks!

On Jul 15, 7:12 am, Miloš Rašić <milos.ra...@gmail.com> wrote:
> You are absolutely correct in your assumption that you can mix and match.
> Personally, I'm using Appcelerator Titanium Desktop with jQuery on the
> client side with PHP and NodeJS on top of MySQL database and I don't see how
> there could be any problem between any combination of server-side and
> client-side technologies.
>
> I also have to disagree with Clint about the idea that server simply
> produces HTML. In my case, the server only produces JSON encoded data. This
> particular detail is a very important choice you have to make when picking a
> client-side library or framework. With ExtJS or SproutCore frameworks you
> certainly won't be generating much HTML on the server. jQuery and YUI are
> libraries and thus much lower-level and more flexible, allowing you either
> generate HTML on the server or simply generate JSON or XML data and create
> HTML on the client. If you wish to use a higher level framework with HTML
> generated on the server, JsMVC or ukijs might be more "HTML friendly".
>

[Martin Cooper]

On Fri, Jul 15, 2011 at 2:02 PM, Scott Alexander
<stefansc...@gmail.com> wrote:
> Hi Miloš -
>
> Yes you're right, I do expect I will just be generating JSON on the
> server, and letting the client-side weave that into some sort of
> presentation - I assume letting ExtJS manipulate the DOM. (It looks
> like it will be easier to use the DOM to render a page rather than
> templates - as the DOM is already "parsed" into a meaningful tree
> structure whereas templates seem to be a monolithic chunk of text.)
>
> There is another UI framework, which I think was forked from some
> earlier version of ExtJS, called Isomorphic SmartClient - but I don't
> think its advanced data-handling features (which involve server-side
> processing in Java) would have any applicability using NodeJS, so the
> right now I'm leaning towards ExtJS for developing "rich" database
> browser clients.

Actually, SmartClient predates ExtJS by several years. It was around
in the days when people still cared about Netscape 4.7. Even back
then, the framework came with a server-side component in Java, but it
was optional. We had it in production back then, and used the
interface it defined between client and server, but we didn't use
their server-side code, we did our own thing.

--
Martin Cooper

[Joe Developer]

You may find this interesting: http://neyric.github.com/inputex/examples/json-schema.html

[kanitkar...@gmail.com]

Hi,

I have started learning Node Js on my own & I have following scenario in which I would like to request you to give me suggestions

How can I create a Single Page App that uses jQuery, Html, CSS on client side & NodeJs plus MongoDb on the server side ?
I really don't want to use any server side template like Jade. I want to use HandleBars on Clientside and not through NodeJs.

I just want to use plain simple Html page & make it dynamic using jQuery.
I want to use Node only to return JSON data from MongoDb.

So can you please please provide me some guidance ?

If you have any source code or sample project which does above, it will be of great help to me.

Thanks in advance !

Regards,

Abhishek Kanitkar

[Angel Java Lopez]

Hi

There is an interesting sample

https://github.com/ccoenraets/nodecellar

It uses Socket.io, also, to produce realtime analytics (in serverwithanalytics.js)

See author blog for more details

http://coenraets.org/blog

Online demo

http://nodecellar.coenraets.org/#

Angel "Java" Lopez

@ajlopez

--

--
Job Board: http://jobs.nodejs.org/
Posting guidelines: https://github.com/joyent/node/wiki/Mailing-List-Posting-Guidelines
You received this message because you are subscribed to the Google
Groups "nodejs" group.
To post to this group, send email to nod...@googlegroups.com
To unsubscribe from this group, send email to
nodejs+un...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/nodejs?hl=en?hl=en
 

---

You received this message because you are subscribed to the Google Groups "nodejs" group.

To unsubscribe from this group and stop receiving emails from it, send an email to nodejs+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Crenshinibon]

Hi,

I have been scowled upon this recommendation, but if you are looking for quick results, check out http://meteor.com.

It sits on top of Node.js, uses Handlebars as the templating engine underneath, stores the data in MongoDB, uses Twitter Bootstrap as the UI, includes jQuery and CoffeeScript if you like and has some other goodies.

But beware, it also uses Fibers and is therefore more on the synchronized side of life. Not much of the usual async Node.js style left.

Regards

Dirk

[Crenshinibon]

Their code is on Github. So you could use it as a source of inspiration in case you try to build a similar system.

Regards

Dirk

[Abhishek Kanitkar]

Thanks I will have a look at it !

I have one more small question.

Is it a good idea to do the following ?

Serve static web content like JavaScript, CSS & HTML file through another webserver & use Node only to do parallel programming or things it is good at doing ? like making a RESTful api out of it ?

--

--
Job Board: http://jobs.nodejs.org/
Posting guidelines: https://github.com/joyent/node/wiki/Mailing-List-Posting-Guidelines
You received this message because you are subscribed to the Google
Groups "nodejs" group.
To post to this group, send email to nod...@googlegroups.com
To unsubscribe from this group, send email to
nodejs+un...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/nodejs?hl=en?hl=en
 

---
You received this message because you are subscribed to a topic in the Google Groups "nodejs" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/nodejs/tcDTmM_4rz8/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to nodejs+un...@googlegroups.com.

[Dave Horton]

To the original question, as confirmed by others ExtJS and node will work fine.  I have used extJS in the past, ended up moving on from it so I thought I would post about my experience.  Basically, I found it to be a very heavy weight client side framework  - does a lot of things for you, but makes a lot of decisions that you might have wanted to do differently.  I was disappointed in the GUI generator -- at the time it appeared to have some bugs or limitations, and I ended up having to ditch it and write my own javascript code, in the framework that ExtJS wanted.  All of this made me think that maybe instead of trying to hide my CSS inabilities I ought to buckle down and just learn it better.  

I've now switched to a much lighter-weight assemblage of client side tools that I am quite happy with: Backbone.js (view and data handling), jQuery (of course), jQuery data tables (a fine replacement for extJS data grids), bootstrap CSS, and an additional bootstrap CSS template with lots of ready to use widgets (http://themeforest.net/item/katniss-premium-admin-template/3878281).  On the server side, the usual: node, express, jade.  I'm using mongodb for the database; could of course be a SQL database but boy oh boy is implementing the database layer a lot easier in mongodb.

[Crenshinibon]

Well, I haven't taken any Node.js project that far. But there should be many sources discussing this topic. Nginx seems to be the first choice, for serving static content.

Regards

Dirk