Re: A Responsive Single Page App (SPA) with 3 Issues to Consider -- WEB400

The whole idea behind SPAs is that you don't have to load frameworks (ie,
CSS and Javascript) more than once. So yes, saving bandwidth.

The content can be loaded in hidden divs and replaced that way, or it can
be fetched from the server at the time it's needed. But it's ONLY the
content, not the framework(s).

This is instead of each time you change the page all the framework is
downloaded again.

Brad
www.bvstools.com

On Tue, Jul 14, 2015 at 1:49 PM, Kelly Cookson <KCookson@xxxxxxxxxxxx>
wrote:

This page on MSDN has an interesting figure illustrating the difference
between a traditional web page and a single page app in terms of the page
lifecycle:

https://msdn.microsoft.com/en-us/magazine/dn463786.aspx

My site basically has the single page app life cycle, except instead of
using AJAX to make an HTTP request and getting JSON in return, I'm using a
JQuery load method (probably via HTTP) to get some HTML markup in return.

I did play around with JQuery Mobile a few months back. I understand the
idea that multiple pages can be included in a single HTML file. This is not
what my site is doing. So, I guess it depends on how you think about single
page apps. I tend to think of them in terms of the Wikipedia definition and
anything with the "SPA Lifecycle" in the figure in the diagram above.

Thanks,
Kelly

-----Original Message-----
From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Kelly
Cookson
Sent: Tuesday, July 14, 2015 1:24 PM
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: Re: [WEB400] A Responsive Single Page App (SPA) with 3 Issues to
Consider

My site doesn't download all the files with an HTML extension in one shot.
When a user visits my site, here is what gets downloaded initially and only
one time:

* the index.html file
* the screen.css file (which contains all of my site's CSS)
* the socialhope.js file (which contains all of the JavaScript I have
written)
* JQuery
* the Open Sans 400 and 600 fonts from Google fonts

After that, the only thing that happens is:

1. A user clicks on a link.
2. New content is loaded into the <article></article> element inside the
index.html file (via JQuery).

Someone more familiar than me with JQuery will need to explain what JQuery
does under the covers to load the content. I'm guessing it involves an HTTP
request...which means I just lied to Pete in my previous post. (Sorry
Pete.) What I should have said was that the user never leaves the
index.html URL when they click a link.

Thanks,
Kelly

-----Original Message-----
From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Aaron
Bartell
Sent: Tuesday, July 14, 2015 1:15 PM
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: Re: [WEB400] A Responsive Single Page App (SPA) with 3 Issues to
Consider

Everything is downloaded on an initial load.

The approach I've taken is "single page per subject area". For example,
if you navigate to /customers then you'd load an initial/base customer.html
file and download subsequent page partials from there. This approach also
sets foundation for larger apps where downloading all pages in advance will
be problematic.

Aaron Bartell

On Tue, Jul 14, 2015 at 12:06 PM, Kelly Cookson <KCookson@xxxxxxxxxxxx>
wrote:

My site satisfies the basic concept of a single page application.
There's no official definition, but I do think Wikipedia actually has
the right idea on this one:

"A single-page application (SPA), is a web application or web site
that fits on a single web page with the goal of providing a more fluid
user experience akin to a desktop application. In a SPA, either all
necessary code - HTML, JavaScript, and CSS - is retrieved with a
single page load, or the appropriate resources are dynamically loaded
and added to the page as necessary, usually in response to user actions."

That's exactly what my site does. Everything is downloaded on an
initial load. The content of the page is then loaded dynamically in
response to user actions (clicking on links).

I freely admit that people often have something more complex in mind
(such as the Google's Gmail) when they think of single page apps. But
I didn't say my site illustrated all of the capabilities and
advantages of a single page app. :-)

Thanks,
Kelly

-----Original Message-----
From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Pete
Helgren
Sent: Tuesday, July 14, 2015 10:35 AM
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: Re: [WEB400] A Responsive Single Page App (SPA) with 3 Issues
to Consider

<Been sitting on the sidelines watching...>

Just to ask a question, and I haven't had a chance to dive deep into
your app, how is this a "Single Page" application? I see multiple
pages referenced here. My SPA's all have a single page (a single html
file)...period. I use jQuery Mobile to manage the "pages" (basically
<div>s with "page" classes) that but you could write your own
handler that would hide all <div>'s with a "page" class except the one
you want to display and not use jQM. There are many way to have one
html file with multiple sections that look like "pages".

Or, maybe the thread has drifted OT while these test applications are
shaken out....?

Pete Helgren
www.petesworkshop.com
GIAC Secure Software Programmer-Java

On 7/14/2015 2:40 AM, Kevin Turner wrote:

I don't really understand the point you were trying to make To be

honest. Your page just shows an example of a menu system - nothing
new there. But this thread is about how the look and feel responds
when delivered on a smaller device. Yours doesn't "respond" at all -
it is just the same page on a small screen. Having the menu collapse
into a three bar button is a common, intuitive approach - so the idea
was for you to view and assess it on such a device. You don't get
"hover" and "tooltip" when you are using your finger to operate a
mobile touch screen. Also, you don't necessarily have to sacrifice
functionality - you just need to be clever enough to modify the UI to
suit the screen size, which includes collapsing widgets and bigger text.

Sent from my iPad

On 14 Jul 2015, at 06:45, Booth Martin <booth@xxxxxxxxxxxx> wrote:

My example was written without a code generator.

I understand the point about being responsive and was clear that
what I

was showing was only a starting point.

I just went back and looked at Nathan's example. I had had my pane
too

narrow and the menubar was not visible. I see it is set to nowrap and
uses a 3-bar button on the upper right corner when too narrow. Since
a hover didn't drop the menu or display a tooltip, I didn't pick up on
that element being a clickable image - it looked like a part of the
blue bar background image.

The severe design limitation I see with a fully responsive solution
is

that the site design is severely limited if there is going to be a
one-solution-everywhere requirement. This, to me, is a designer
issue, not a programmer issue.

As to JQuery... I have no issues with that as a tooling solution.

On 7/13/2015 11:54 PM, Bradley Stone wrote:
I agree with Nathan here. I don't see any comparison with your

example.

Was it generated by a WYSIWG tool?

How is using jQuery like building a typewriter?

Brad
www.bvstools.com

On Mon, Jul 13, 2015 at 11:43 PM, Nathan Andelin
<nandelin@xxxxxxxxx>

wrote:

Would the following be a far neater and more standard starting

place?

http://martinvt.com/Menu

It has some cool gradients, but is otherwise non-functional.

I understand the concept being pursued but it seems to me that
ignoring the simple tools that are available to us is kind of
like writing an

essay

on world peace where the first step is to build a typewriter.

Again, without you showing us something that is functional, it is
hard to compare. You may have a point; a simpler menu perhaps.
But it's not readily apparent.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400)
mailing list To post a message email: WEB400@xxxxxxxxxxxx To
subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx Before posting, please take a
moment to review the archives at http://archive.midrange.com/web400.

___________________________________________
This email has been scanned by iomartcloud.
http://www.iomartcloud.com/

________________________________

NOTICE: The information in this electronic mail transmission is
intended

by CoralTree Systems Ltd for the use of the named individuals or
entity to which it is directed and may contain information that is
privileged or otherwise confidential. If you have received this
electronic mail transmission in error, please delete it from your
system without copying or forwarding it, and notify the sender of the
error by reply email or by telephone, so that the sender's address

records can be corrected.

--------------------------------------------------------------------
--
----------

CoralTree Systems Limited
Company Registration Number 5021022.
Registered Office:
12-14 Carlton Place
Southampton
Hampshire
SO15 2EA
VAT Registration Number 834 1020 74.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400)
mailing list To post a message email: WEB400@xxxxxxxxxxxx To
subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives at
http://archive.midrange.com/web400.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400)
mailing list To post a message email: WEB400@xxxxxxxxxxxx To
subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives at
http://archive.midrange.com/web400.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list To post a message email: WEB400@xxxxxxxxxxxx To subscribe,
unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives at
http://archive.midrange.com/web400.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list To post a message email: WEB400@xxxxxxxxxxxx To subscribe,
unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives at
http://archive.midrange.com/web400.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list
To post a message email: WEB400@xxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives
at http://archive.midrange.com/web400.