PDA

View Full Version : JavaScript side-by-side with VFP



josipradnik
2015-11-09, 04:55
Although Herb just published a great video (http://www.lianja.com/community/showthread.php?3138-Building-a-web-app-with-VFP-code&p=14014&viewfull=1#post14014) (as always) - "Building a web app with VFP", I will put VFP vs. JavaScript side-by-side here. And will show that JS should not be a problem for VFP developers.

Building Lianja web/mobile apps means you (have to learn) are advised to learn some JS syntax to write client side stuff, because VFP is used only on server side. Web browsers do not speak Visual Foxpro but all understand JavaScript .
VFP is data centric. Plain SQL commands are the part of VFP syntax. That is why VFP developers can make anything with data what customer wishes, and can do it so quickly. These complex data apps written in VFP are tedious to convert to some newer platform. That is why we are all looking around and we hope Lianja will be good replacement for VFP. In Lianja concept VFP belongs to the server side, close to data - when it comes to nondesktop apps.

VFP and JS, side-by-side, for easy learning:

https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_1.png (https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_1.png)

https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_2.png (https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_2.png)

https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_3.png (https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_3.png)

https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_4.png (https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_4.png)

https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_5.png (https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_5.png)

https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_6.png (https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_6.png)

https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_7.png (https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_7.png)

https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_8.png (https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_8.png)

https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_9.png (https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_9.png)

https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_10.png (https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_10.png)

https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_11.png (https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_11.png)

https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_12.png (https://lianjadeveloper.files.wordpress.com/2015/11/vfp2js_12.png)

Because of max images in a post limit, the last image is in words:


USING EXTERNAL CODE
VFP............................................... .. JavaScript
SET PROCEDURE.........................<script ... src='filename'>
SET CLASS LIBRARY

(all images are here (https://lianjadeveloper.wordpress.com/) in the article on my blog with [Answers] stuff in one place)

Source: http://www.slideshare.net/wmichaelfeltman/feltman-js4-vfp

One of the biggest problem for VFP'ers is SEMICOLON. When?

Rule #1 : ASSIGNMENT OPERATORS

When the assignment operator is used outside of parentheses, insert a semicolon after the right operand of the assignment operator

// Use a semicolon
var firstName = 'Homer';
/*
* Do not use a semicolon
* inside of the parentheses
*/
var setName = function(name = “John Doe”) {
return name;
/*
* Use a semicolon
* after closing curly brace
*/
};

Rule #2: FUNCTION INVOCATION

Insert a semicolon after a closing parenthesis if a function is being invoked;
however, not when it is the second operand of a ternary operator:

// Use a semicolon
console.log(“I’m an infinite loop!”);
/*
* Do not use a semicolon after
* function1 (2nd operand)
*/
(true) ? function1() : function2();


Rule #3: KEYWORDS THAT ARE COMMANDS

Insert a semicolon after one of these keywords and their corresponding syntax:

continue;
return “hello”;
break;
throw new Error(“I’m an error.”);


Rule #4: VARIABLE DECLARATION

Insert a semicolon after a variable declaration if :
1) the variable is not a parameter or
2) the variable is the last declared variable in a list of variables:

// Variable is not a parameter
var i;
// Variable is a parameter
var func = function(i) {
return i;
};
/*
* A list of variables with
* correct semicolon usage
*/
var i,
len;
/*
* A list of variables with
* incorrect semicolon usage
*/
var i;
len;


Rule #5: LOOPS ARE A SPECIAL CASE

Insert a semicolon after each of the first two arguments in a for-loop. This rule clearly breaks rule #1 (Semicolons should not be used inside of parentheses). A semicolon isn't applied to the third argument. You should consider semicolons in a for-loop as nothing more than delimiters for arguments.

/*
* Semicolons are delimiters
* for arguments in a for-loop
*/
for (i = 5; i; i--) {
console.log(i);
}

A while-loop has an inconsistent application of semicolons, too. There are two forms of a while-loop.

a) The first form includes the keyword do at the beginning of a loop and the keyword while at the end of a loop. This construction requires a semicolon.

/*
* Insert a semicolon after a
* closing parenthesis of a
* do-while loop:
*/
do {
console.log(“I’m an infinite loop!”);
} while (true);

b) The second form excludes the keyword do; it also excludes a need for a semicolon.

// Do not require a semicolon
while (true) {
console.log(“I’m an infinite loop!”);
}


Source: http://www.choskim.me/when-to-use-semicolons-in-javascript/

hmischel@diligentsystems.com
2015-11-09, 06:29
Josip - that's very handy!

Thanks for posting it.

Herb

pauln
2015-11-09, 07:22
Very, very cool :cool:- thanks Josip for these references and all your work in the "Beginners" threads!
I always start over there to read your updates!
Regards Paul.

CGibson
2015-11-09, 09:12
Excellent quick reference guide.
Thanks Josip.

Cory

alanbourke
2015-11-10, 10:00
I think most Visual FoxPro developers would find Javascript mostly straightforward - the biggest learning curve would be with the prototype-based model of JavaScript.

barrymavin
2015-11-10, 17:53
One thing that's important to VFP developers in this context is that the Lianja framework includes most of the VFP built in functions in JavaScript and also that the LOM (Lianja Object Model) is available in desktop, web and mobile apps in all of the supported scripting languages.

The visual nature of Lianja development does not require extensive JavaScript coding so let's not make it look like it does.

Apps are built out of pages and pages are built out of sections, all visually setting attributes to affect the appearance and behavior of the UI.

The only place you really need to do any JavaScript programming is if you need to handle special actions through delegates that act as a proxy to call server side Lianja/VFP procedures. This too was simplified in v2.0 with automatic proxying to server side business procedures.

pauln
2015-11-10, 18:57
The only place you really need to do any JavaScript programming is if you need to handle special actions through delegates that act as a proxy to call server side Lianja/VFP procedures. This too was simplified in v2.0 with automatic proxying to server side business procedures.

Yes I would like to see a demo of this from start to finish like Herb demonstrated.
My theory is to write a standard simple call script that refers always to Server side logic if that makes sense? This practice (if possible) will enable extensive parts of existing VFP code to be placed into procedures on the server side.

barrymavin
2015-11-10, 20:55
"My theory is to write a standard simple call script that refers always to Server side logic".

Any server side business logic procedures can be used in validation expressions, used in {...} macros, called using Lianja.evaluate() or setup as remote procedure calls as described in an earlier forum post which has some code examples:
http://www.lianja.com/community/showthread.php?2998-Lianja-v2-0-Beta16-improved-Client-Server-integration

Building Web and/or mobile Apps requires a separation between the UI presentation and the server side business logic.