Recent

Author Topic: Writing a Mobile Web App with Pascal  (Read 7248 times)

Phil

  • Hero Member
  • *****
  • Posts: 2737
Writing a Mobile Web App with Pascal
« on: April 26, 2018, 11:58:00 pm »
Part 4 of an occasional series of articles on Web app development:

"Writing a Mobile Web App with Pascal"

https://macpgmr.github.io/MacXPlatform/WebAppOverview.html

Note that you'll need at least version 0.9.18 of the Pas2JS Pascal to JavaScript "transpiler".

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Writing a Mobile Web App with Pascal
« Reply #1 on: April 27, 2018, 12:18:51 am »
Hi, I don't know if is the right link, it says 2016? I see now the updated date.

And Dropbox can't be used anymore to host pages, AFAIK.

I need to try the transpiler, did not found a project to do it yet.
« Last Edit: April 27, 2018, 12:25:57 am by lainz »

Phil

  • Hero Member
  • *****
  • Posts: 2737
Re: Writing a Mobile Web App with Pascal
« Reply #2 on: April 27, 2018, 12:26:13 am »
Hi, I don't know if is the right link, it says 2016? I see now the updated date.

And Dropbox can't be used anymore to host pages, AFAIK.

Correct, Dropbox eliminated that maybe a couple of years ago. Hence Github:

https://pages.github.com/

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Writing a Mobile Web App with Pascal
« Reply #3 on: April 27, 2018, 12:27:25 am »
Yes =)

I use that for my website also, but I mean in the text of your link, it says Dropbox.

Phil

  • Hero Member
  • *****
  • Posts: 2737
Re: Writing a Mobile Web App with Pascal
« Reply #4 on: April 27, 2018, 12:31:35 am »
I use that for my website also, but I mean in the text of your link, it says Dropbox.

Oh, you mean _in_ the article. Yeah, I suppose that two years ago when Part 1 was written Dropbox was still a possibility. Perhaps I should edit that.

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Writing a Mobile Web App with Pascal
« Reply #5 on: April 27, 2018, 12:39:12 am »
I use that for my website also, but I mean in the text of your link, it says Dropbox.

Oh, you mean _in_ the article. Yeah, I suppose that two years ago when Part 1 was written Dropbox was still a possibility. Perhaps I should edit that.

Yeah, no problem, I think no one will notice.

And, good demo, I like it.

I've seen on the Wiki this demo http://ragnemalm.se/images/santa/santa.html

Phil

  • Hero Member
  • *****
  • Posts: 2737
Re: Writing a Mobile Web App with Pascal
« Reply #6 on: April 27, 2018, 12:47:26 am »
And, good demo, I like it.

The Part 1 demo that you might be looking at is actually the original JavaScript app from two years ago. However, the Pascal to JavaScript version from Part 4 is visually and functionally identical so I didn't post it.

Remember, Part 4 is the only new content here.


lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Writing a Mobile Web App with Pascal
« Reply #7 on: April 27, 2018, 12:53:41 am »
And, good demo, I like it.

The Part 1 demo that you might be looking at is actually the original JavaScript app from two years ago. However, the Pascal to JavaScript version from Part 4 is visually and functionally identical so I didn't post it.

Remember, Part 4 is the only new content here.

Ok. I see that Lazarus can open JS files..

And, well, is the way It's better to design UI, In my opinion. Like in your demo, with Code.

In the FPC Paymo Widget I made, I still can't figure on how to solve the High DPI thing on Windows, designed with the Forms editor, but the elements I create by code are always perfectly aligned and sized.

Modern languages like Dart are doing like this, for example for Fuchsia OS (Also Android / iOS), UI made with Flutter are coded like that also, there is no WYSWYG.

Phil

  • Hero Member
  • *****
  • Posts: 2737
Re: Writing a Mobile Web App with Pascal
« Reply #8 on: April 27, 2018, 01:11:35 am »
Ok. I see that Lazarus can open JS files..

Although Lazarus is unable to syntax highlight the .scss or .json files that are an important part of a qooxdoo project.

And, well, is the way It's better to design UI, In my opinion. Like in your demo, with Code.

Yes, I think so too.

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Writing a Mobile Web App with Pascal
« Reply #9 on: April 27, 2018, 01:15:58 am »
You have used Angular / Vue / React? If yes, how is qooxdoo compared to them?

Phil

  • Hero Member
  • *****
  • Posts: 2737
Re: Writing a Mobile Web App with Pascal
« Reply #10 on: April 27, 2018, 01:23:51 am »
You have used Angular / Vue / React? If yes, how is qooxdoo compared to them?

I've looked at Angular and React, particularly React because of its support for Mapbox:

https://github.com/uber/react-map-gl

But that's all I've done, just look. Mastering one of these big JS toolkits is a long and sometimes tedious trial and error process. Since I already knew qooxdoo, I thought I would look at what it would take (first if it was possible) to use qooxdoo with Pascal.

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Writing a Mobile Web App with Pascal
« Reply #11 on: April 27, 2018, 01:28:42 am »
Yes, it takes time to learn. I personally used only Angular 1.x, tested Angular 2 and did not like it at all, too much code for a simple application.

Vue is like Angular 1, and React is a different world.

The only thing that I like of these frameworks is the handling of arrays, so if you want to update a single element of a list of items of a page, don't need to recreate everything (a lot of time and resources consuming).

I've used the old JQuery also  ::)

Phil

  • Hero Member
  • *****
  • Posts: 2737
Re: Writing a Mobile Web App with Pascal
« Reply #12 on: April 27, 2018, 01:35:18 am »
I've used the old JQuery also  ::)

What attracted me to qooxdoo in the first place was how nice the apps looked on mobile devices, almost like native iOS apps. As Part 1 suggests, try loading the actual app (not the app embedded in the Part 1 desktop page) into a phone and see how well its master-detail layout adapts to a small screen:

https://macpgmr.github.io/iApps/fishfacts

Nowadays often the first contact that users have with your product or service or whatever is via their phone, so your Web apps need to adapt to that.

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Writing a Mobile Web App with Pascal
« Reply #13 on: April 27, 2018, 01:42:36 am »
Sure, it's the world of today.

I've made something that looks like that, in 2013 made with Angular 1 and JQuery mobile (that skin looks a bit like qooxdoo).
http://ventaja-comparativa.blogspot.com/

Is some kind of formula for a teory of a career I left unfinished 'International Commerce', but in that time I was doing web apps, so commerce was not for me.

And something more modern is this (yet Angular 1, but instead of JQuery mobile, I'm using Material Design)
https://lainz.github.io/webapps/cuentas/

And also works fine on mobile / desktop.

Sorry, both are in Spanish, I need to code a bit more of english apps.

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Writing a Mobile Web App with Pascal
« Reply #14 on: April 28, 2018, 04:57:47 pm »
What attracted me to qooxdoo in the first place was how nice the apps looked on mobile devices, almost like native iOS apps. As Part 1 suggests, try loading the actual app (not the app embedded in the Part 1 desktop page) into a phone and see how well its master-detail layout adapts to a small screen:

https://macpgmr.github.io/iApps/fishfacts

Nowadays often the first contact that users have with your product or service or whatever is via their phone, so your Web apps need to adapt to that.

Sorry, I forget to comment to that part.

It works perfectly on my phone. Very good work. Also two profit since you did it with Pascal.

 

TinyPortal © 2005-2018