Introduction



ColdFusion + JavaScript Frameworks: How to build scalable and interactive applicationsReact, and Vue.jsIntroductionColdFusion has a reputation for simplifying everyday programming tasks in convenient, easy to use, native functions. With technology continuing to evolve and different systems finding common integration points, it is critical to make good technological decisions with your applications.Likewise, JavaScript frameworks have emerged as essential parts of modern web development. By combining ColdFusion and these frameworks you can deliver robust and highly interactive web applications that easily scale. The initial process in selecting the appropriate framework to complement your ColdFusion Applications can be a difficult task. There are many options and potential candidates, this tutorial will expose you to a few different concepts and help introduce you to several technologies. Trying to learn everything you need to know about these frameworks is simply not possible in one tutorial. Rather, this document is meant to provide you with high-level details and examples covering the highlighted JavaScript Frameworks in this paper. There will be a few exercises in this document with sample code and the steps on how to complete them. Before diving into this a bit further there are a few items we need to review. The project owners of these frameworks do a fantastic job with documenting their features and this is not meant to replace it but highlight some benefits and illustrate the potential use of ColdFusion with these technologies. PrerequisitesTo follow this tutorial, you will need to have some fundamental building blocks of knowledge to complete the exercises. There is nothing complex but working knowledge will be key in understanding all the concepts. You should have some familiarity with REST APIs, ColdFusion, HTML, and JavaScript, but you should be able to follow along even if you are coming from a different programming language. Programming concepts like functions, objects, arrays, classes, and API development will be covered, but not in detail. Rather, the focus will be on simple tutorials to get you started. To assist in moving the demonstrations along, there will be a quick review on creating ColdFusion REST Services to help you get started. Feel free to skip that section if you are comfortable with building REST components. The REST services included in this tutorial will provide data for sample applications that will be demonstrated in this document. These sample calls will be simple and only provide small datasets to illustrate ColdFusion at play with the JavaScript frameworks. Creating REST Web Services with ColdFusionYou can create and publish a ColdFusion component (CFC) or any function in a component as a REST Resource. First go to the root directory of your ColdFusion installation and create a directory for your service calls. The ColdFusion Components (CFCs) will live in this directory. For this example, you can create a directory called webservices. When creating a Component (CFC) specify the cfcomponent tag to one of the following: restPath or rest. In this example we will use restPath and set it equal to “customers”. We have set the rest attribute equal to “true”.And for good practice we have set the name attribute equal to “Customers”.Tag Based Syntax:Script Based Syntax:Next, you must register your REST API Services in ColdFusion. We will cover two options in how to complete this. We will assume you have access to the ColdFusion Administrator and cover that scenario first. The second option can be done directly through code in ColdFusion, in the event you do not have access to the administrator.ColdFusion Administrator (REST Service Registration)Log into the ColdFusion Administrator and click on the Data & Services. You should be able to access the administrator by visiting this link (). Click on the Web Services optionClick on the Browse Server option and select the directory where your Rest Components will live. Earlier, we created the webservices directory in our ColdFusion root installation. Let’s continue to use this for demo purposes. Select the directory webservices and click on OKSelect the service mapping name. In this tutorial we will call it “api”, and we will set it as the “default application” and click on “Add Service”After the service is created, you should see the meta data associated with it listed in the “Active ColdFusion REST Services”. This completes the Administration configuration. The contextual endpoint for your services can now be invoked by calling {Mapping and Sub Resources}We will now cover one additional option if your access to the ColdFusion administrator is not available.ColdFusion Programmatic REST API Registration (Application.cfc)First you will need to add a Application.cfc to the root directory of your installation. Add the “restInitApplication” function and provide the path to your directory where your service components are located.Utilizing the getDirectoryFromPath function and getCurrentTemplatePath function, you can dynamically set these values and then simply specify the “Service Mapping” name. For demonstration purposes I have named this sample “coderegister”so it will not cause conflict with the previous Administrator registration. In the earlier part of the tutorial, we utilized the Administrator directly. In this case, the Application.cfc will register the services in the system, and they will appear in the Administrator automatically. If you do have access to the ColdFusion Administrator, you can verify that the REST service has been registered and is active. You can see below the “coderegister” service group is now available and ready to take requests. The contextual endpoint for your services can now be invoked by calling {Mappings and Sub Resources}Sample Components and Functions to build your REST APIsTo illustrate some sample code, we will continue with the samples we have already provided. In the webservices directory that we mapped in ColdFusion earlier, we will create a Component (CFC) called Customers. We will also create a CustomersScriptBased Component (CFC) to illustrate the same process but without tags. If you prefer to write only in script those samples will be provided as well. Let us take a closer look at the Customers.cfc. We will begin by writing a simple function called get, and in that an array to store all customers. Take note of some key attributes that we have specified in the CFC. For the Customers.cfc we have used the syntax below (tag based):The rest argument is equal to true and the restpath was set to customers. It is not required to match the name of the CFC. In this case, we will keep it simple and consistent. Next, we look at the function tag. It is here we declare the name of our method and call it “get”. We set the access equal to “remote”. Even though this will return a JSON payload the data type is set to “array”, since ColdFusion handles the serialization of JSON automatically. We make sure to set the produces equal to “application/json” and lastly the httpmethod is set to “GET”. One additional thing to understand, we did not set the restPath for the get. Since you will invoke this from the URL, and there is no other httpMethod of GET in the entire class, the routing will not be an issue. ColdFusion will know to invoke this class and method and process the request. If we did have multiple GETs in the CFC this would be a problem. For good practice, it makes logical sense to provide the restPath at a function level. GET API Call Tag BasedGET API Call Script BasedIf you invoke from the browser you can see the data is returned in a JSON format. Invoking it from the Adobe ColdFusion REST Playground will return the same response, with a few more details. What is Vue.jsVue is a progressive framework for building out user interfaces. Like React, it is simple to include this framework in small incremental adoptions. Functionally speaking, the core library is hyper focused on the view/template layer and can be combined with a multitude of different libraries or even existing code. This simply means, you can add Vue.js to any of your existing applications with very little disruption and avoid major changes. This works out quite nicely and simplifies the task of adding Vue to your existing .cfm templates.Vue is not limited to an MVC style of architecture. It can be used with many different architectural approaches including Component Based Architecture which is used in React. The flexibility and simplicity of Vue.js makes it a very attractive option for enhancing the UI of your web/applications built in ColdFusion.Vue.js StrengthsEasy to migrate, basic and well documented structure.Fantastic documentationExcellent methodologies to apply transitions to HTML components when included or expelled from the DOM.Simple to create custom elements and extremely reusable.What is React?React is used to develop single-page and cross-platform applications. React is loaded with rich features that can be used to easily customize your web applications. The framework has made developing light and modern applications a shortened task without too much difficulty. Created by Facebook, React is now an open-source project. It is based on JSX and JavaScript. React takes the approach of breaking webpages down into single components and allows developers to easily build clean and simplified interfaces. React Strengths Easily scaled and adaptable for large enterprise scale applications. Feature rich, and constantly being updated.Reusability of code components Key Differences Between Vue.js and ReactReact.jsVue.jsJSX Approach for development JavaScript MVVM (Model-view-viewmodel) , template-based methodology for development.Web and Mobile ApplicationsWeb ApplicationsMobX – State managementVueX – State managementThis document is not just for reading, it is for trying too. Watch for the Try it text in red throughout this document so you can learn by doing. Both Script and Tags will be covered!Contents TOC \o "1-3" \h \z \u Introduction PAGEREF _Toc70973067 \h 1Prerequisites PAGEREF _Toc70973068 \h 2Creating REST Web Services with ColdFusion PAGEREF _Toc70973069 \h 2What is Vue.js PAGEREF _Toc70973070 \h 13Vue.js Strengths PAGEREF _Toc70973071 \h 13What is React? PAGEREF _Toc70973072 \h 13React Strengths PAGEREF _Toc70973073 \h 14Key Differences Between Vue.js and React PAGEREF _Toc70973074 \h 14React PAGEREF _Toc70973075 \h 17Getting Started PAGEREF _Toc70973076 \h 17Browser Direct PAGEREF _Toc70973077 \h 17JSX PAGEREF _Toc70973078 \h 18Simple Demonstration PAGEREF _Toc70973079 \h 18Step 1: Create a directory in your ColdFusion Application PAGEREF _Toc70973080 \h 18Step 2: Create a .cfm file PAGEREF _Toc70973081 \h 19Step 3: Add some markup to the .cfm template PAGEREF _Toc70973082 \h 19Step 4: Insert a DOM Container PAGEREF _Toc70973083 \h 20Step 5: Add Script Tags to your template PAGEREF _Toc70973084 \h 20Step 6: JSX code PAGEREF _Toc70973085 \h 21Step 7: Run the code PAGEREF _Toc70973086 \h 22Demonstration with REST PAGEREF _Toc70973087 \h 23Step 1: Create a sample file and save it to the root of your reactDemo directory. PAGEREF _Toc70973088 \h 23Step 2: Set the response data to a variable PAGEREF _Toc70973089 \h 23Step 3: Write some JavaScript to handle the ColdFusion data PAGEREF _Toc70973090 \h 24Step 4: Create a new function called CustomersList PAGEREF _Toc70973091 \h 24Step 5: Create a render block to invoke the CustomersList function PAGEREF _Toc70973092 \h 25Step 6: Verify the completed .cfm template. PAGEREF _Toc70973093 \h 26Step 7: Invoke the URL in a browser PAGEREF _Toc70973094 \h 27Vue.js PAGEREF _Toc70973095 \h 28Getting Started PAGEREF _Toc70973096 \h 28Browser Direct PAGEREF _Toc70973097 \h 28Simple Demonstration PAGEREF _Toc70973098 \h 29Step 1: Create a directory in your ColdFusion Application PAGEREF _Toc70973099 \h 29Step 2: Create a .cfm file PAGEREF _Toc70973100 \h 29Step 3: Add some markup to the .cfm template PAGEREF _Toc70973101 \h 30Step 4: Insert a DOM Container PAGEREF _Toc70973102 \h 30Step 5: Add Script Tags to your template PAGEREF _Toc70973103 \h 30Step 6: Declarative rendering PAGEREF _Toc70973104 \h 31Completed version PAGEREF _Toc70973105 \h 32Step 7: Invoke the URL in a browser PAGEREF _Toc70973106 \h 32Demonstration with REST PAGEREF _Toc70973107 \h 32Step 1: Create a sample file and save it to the root of your vueDemo directory. PAGEREF _Toc70973108 \h 33Step 2: Add the following lines of code to the file. PAGEREF _Toc70973109 \h 33Step 2: Set the response data to a variable PAGEREF _Toc70973110 \h 33Step 3: Create a new container in the body tag PAGEREF _Toc70973111 \h 34Step 4: Add a new Vue method PAGEREF _Toc70973112 \h 34Step 4: Putting it together PAGEREF _Toc70973113 \h 35Step 5: Invoke the URL in a browser PAGEREF _Toc70973114 \h 35Closing thoughts PAGEREF _Toc70973115 \h 36ReactGetting StartedReact has the unique ability to allow for slow adoption. You can learn at your own desired pace and include pieces of React where it is needed. From simple interactivity to complex apps, React has many powerful features to offer for all developer strengths and needs. There are several online playgrounds to help get you started. The focus of this tutorial is geared to connect JavaScript Frameworks to ColdFusion apps, but it is worth mentioning there are wonderful resources on the React project page to help you get a more in depth feel for the project.Browser DirectOne of the fastest ways to get up and running is to include the React project CDN links directly in your .cfm template. The following three scripts are required to begin this process. The Babel script will allow you to write JSX syntax and ES6 for the demo. Again, this is the quickest path to React, not the most efficient. Production React CDN Links: JS CDN Link: is a syntax extension to JavaScript. It is recommended to be used in parallel with React to describe what the UI should look like. JSX will essentially produce React elements and can be quite helpful in building out your React application. React does not require the use of JSX. It does serve to be a powerful visual aid when working with UI components inside of JavaScript code. You will benefit from enhanced error and warning messages. Simple DemonstrationTry itStep 1: Create a directory in your ColdFusion Application Earlier we created a webservices directory. This directory contains a simple REST API to retrieve data. As this tutorial evolves, we will utilize this data to build out our sample application. The reactDemo folder will contain all the .cfm templates along with the .js files. Step 2: Create a .cfm file Create a .cfm template called index.cfm. Save the file in the root of the reactDemo directory we created in the earlier step. Step 3: Add some markup to the .cfm template <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ColdFusion and React</title></head><body></body></html>Step 4: Insert a DOM Container Open the ColdFusion template named index.cfm that you created in the previous step and insert the following code. Code to insert: <div id=”root”></div>Your updated file should now look like the sample below:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ColdFusion and React</title></head><body><div id="root"></div></body></html>Please be certain to provide a unique name for your container ID. Later, in this tutorial, we will use the created container above to display a React component. For readers that are new to JavaScript, you have the capability to create as many of these containers as you wish. The unique name is key, and the position of them is important for good structure. <div> tags like the one we inserted above, can be placed anywhere inside of the <body> tag in your HTML/ColdFusion Template. In some cases, exactly as we have done in this tutorial you will see empty tags, that is perfectly normal and will happen often as React will be used to populate it with data. Step 5: Add Script Tags to your template Keep in mind we are taking a very simplistic approach in building this application. To bring React into your application you can simply add the following three script tags to your file. Next, add three <script> tags to the HTML page right before the closing </body> tag: Production React CDN Links: JS CDN Link: updated template should now include the following lines of code:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ColdFusion and React</title> <script src="" crossorigin></script> <script src="" crossorigin></script> <script src=""></script></head><body><div id="root"></div></body></html>Step 6: JSX codePaste the following JSX code into the reactColdFusion.js file you created in the previous step. <script type="text/babel"> class Hello extends ponent { render() { return <h1>Hello World!</h1> } } ReactDOM.render(<Hello />, document.getElementById('root'))</script>Step 7: Run the codeYour updated file should now contain all parts of each step. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ColdFusion and React</title> <script src="" crossorigin></script> <script src="" crossorigin></script> <script src=""></script></head><body><div id="root"></div><script type="text/babel"> class Hello extends ponent { render() { return <h1>Hello World!</h1> } } ReactDOM.render(<Hello />, document.getElementById('root'))</script></body></html>Invoke the file via a browser and you should see the following render.Demonstration with RESTTry itIn this part of the demonstration, we will perform a quick exercise to demonstrate ColdFusion REST services in conjunction with React to render dynamic data to your users. You should consider this to not be best practice when invoking REST calls and populating data to your view/template layer. It is simply a demonstration to showcase the capabilities of integrating the technologies. Let’s take a quick look at invoking an API call to obtain data for your page rendering. Step 1: Create a sample file and save it to the root of your reactDemo directory. For convenience, simply copy the markup from the previous demonstration. We will add the following few lines of code. <cfscript> <!--- This is not best practice, simply a quick way to demo ColdFusion REST calls to return data ---> httpService = new http(method = "GET", charset = "utf-8", url = "");</cfscript>Step 2: Set the response data to a variableWe will set a local variable called result to hold the response data from the API call. The data will be an Array of Strings. In a production type setting, you would want to check the http status code and ensure there is a filecontent body delivered in the response. For sake of this demo, we will simply set that variable to the value of the response filecontent. <cfscript> <!--- This is not best practice, simply a quick way to demo ColdFusion REST calls to return data ---> httpService = new http(method = "GET", charset = "utf-8", url = ""); result = httpService.send().getPrefix().filecontent;</cfscript>Step 3: Write some JavaScript to handle the ColdFusion dataCreate a script block with a type of text/babel. In this code you will set a variable equal to the response of the above REST call. <script type="text/babel"> const customers = #result#; </script> Step 4: Create a new function called CustomersListThis function will receive the customers list object and loop over the list to build out an unordered list of the customers. <script type="text/babel">function CustomersList(props) { const customers = props.customers; const listCustomers = customers.map((customers) => <li key={customers.toString()}> {customers} </li> ); return ( <ul>{listCustomers}</ul> );}</script>Step 5: Create a render block to invoke the CustomersList function This render function will call the CustomersList Function and will pass in the customers list of data from the ColdFusion REST call. Ensure that the document.getElementById value matches the one in your body. This will allow the data to be injected when ready.<script type="text/babel"> const customers = #response#; ReactDOM.render( <CustomersList customers={customers} />, document.getElementById('root') );</script> Step 6: Verify the completed .cfm template. <cfscript> <!--- This is not best practice, simply a quick way to demo ColdFusion REST calls to return data ---> httpService = new http(method = "GET", charset = "utf-8", url = ""); result = httpService.send().getPrefix().filecontent;</cfscript><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ColdFusion and React</title> <script src="" crossorigin></script> <script src="" crossorigin></script> <script src=""></script></head><body><div id="root"></div><script type="text/babel"> const customers = #result#; ReactDOM.render( <CustomersList customers={customers} />, document.getElementById('root') ); function CustomersList(props) { const customers = props.customers; const listCustomers = customers.map((customers) => <li key={customers.toString()}> {customers} </li> ); return ( <ul>{listCustomers}</ul> ); }</script></body></html> Step 7: Invoke the URL in a browser You should now see an unordered list of names. The list of names from your ColdFusion REST API call should now be displayed. Vue.jsGetting StartedLet’s look at two simple examples to help you get started. Keep in mind these are meant to give you an initial start and are not overly complicated. We will start with a simple example and illustrate one more use case with a ColdFusion REST call. Browser DirectFor prototyping or learning purposes, you can use the latest version with the following script:<script src=""></script>For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions:<script src=""></script>Development Vue.js CDN Links: Vue.js CDN Links: DemonstrationTry itStep 1: Create a directory in your ColdFusion Application Earlier we created a webservices directory, and a directory for React. We will now create a new directory in the root of our web application called vueDemo. This folder will contain all the .cfm templates along with the .js files. Step 2: Create a .cfm file Create a .cfm template called index.cfm. Save the file in the root of the vueDemo directory we created in the earlier step. Step 3: Add some markup to the .cfm template <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ColdFusion and Vue</title></head><body></body></html>Step 4: Insert a DOM Container Open the ColdFusion template named index.cfm that you created in the previous step and insert the following code. Code to insert: <div id=”vueExample”></div>Your updated file should now look like the sample below:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ColdFusion and Vue</title></head><body><div id="vueExample"></div></body></html>Step 5: Add Script Tags to your template Keep in mind we are taking a very simplistic approach in building this application. To bring Vue into your application you can simply add the following script tag to your file. Next, add the <script> tag to the .cfm template right before the closing </body> tag:Development Vue.js CDN Links: Vue.js CDN Links: updated template should now include the following lines of code:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ColdFusion and Vue</title> <script src="" crossorigin></script></head><body><div id="vueExample"></div></body></html>Step 6: Declarative renderingVue.js allows you to declaratively render data to the DOM using simple syntax:<div id="vueExample"> {{ message }}</div><script type="text/babel">var app = new Vue({el: '#vueExample,data: {message: 'Hello Vue!'}})</script> Completed version<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ColdFusion and Vue</title> <script src="" crossorigin></script></head><body><div id="vueExample"> {{ message }} </div><script > var app = new Vue({ el: '#vueExample', data: { message: 'Hello World!' } })</script></body></html>Step 7: Invoke the URL in a browser Invoke in a browser and you should now see Hello Vue! Render. Demonstration with RESTTry itIn this part of the demonstration, we will perform a quick exercise to demonstrate ColdFusion REST services in conjunction with Vue.js to render dynamic data to your users. You should consider this to not be best practice when invoking REST calls and populating data to your view/template layer. It is simply a demonstration to showcase the capabilities of integrating the technologies. Let’s take a quick look at invoking an API call to obtain data for your page rendering. Step 1: Create a sample file and save it to the root of your vueDemo directory. For convenience, simply copy the index.cfm markup from the previous demonstration. Most of the body content will change for this demo, but the foundational structure of the HTML document should be sufficient to get you going. The file will be called restDemo. Step 2: Add the following lines of code to the file.Add the REST API call to the top of the file. <cfoutput><cfscript> <!--- This is not best practice, simply a quick way to demo ColdFusion REST calls to return data ---> httpService = new http(method = "GET", charset = "utf-8", url = "");</cfscript></cfoutput>Step 2: Set the response data to a variableWe will set a local variable called result to hold the response data from the API call. The data will be an Array of Strings. In a production type setting, you would want to check the http status code and ensure there is a filecontent body delivered in the response. For sake of this demo, we will simply set that variable to the value of the response filecontent. <cfscript> <!--- This is not best practice, simply a quick way to demo ColdFusion REST calls to return data ---> httpService = new http(method = "GET", charset = "utf-8", url = ""); result = httpService.send().getPrefix().filecontent;</cfscript>Step 3: Create a new container in the body tagThis will be a slight change from the previous demo. Update your restdemo.cfm with the following code. A simple unordered list with a for loop built into the li elements. <body><ul id="restDemo"> <li v-for="item in items" :key="item.message"> {{ item }} </li></ul></body>Step 4: Add a new Vue methodInside of a pair of script tags add the Vue call to build out the data for the insertion into the DOM. It will capture the data from the ColdFusion REST call. You can see where we have set #result# in the code below. <script > var restdemo = new Vue({ el: '##restDemo', data: { items: #result# } })</script>Step 4: Putting it togetherYou should now be able to run the completed code in a browser<cfoutput> <cfscript> httpService = new http(method = "GET", charset = "utf-8", url = ""); result = httpService.send().getPrefix().filecontent; </cfscript> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ColdFusion and Vue</title> <script src="" crossorigin></script> </head> <body> <ul id="restDemo"> <li v-for="item in items" :key="item.message"> {{ item }} </li> </ul> <script > var restdemo = new Vue({ el: '##restDemo', data: { items: #result# } }) </script> </body> </html></cfoutput>Step 5: Invoke the URL in a browser Closing thoughtsWe have only scratched the surface in the above tutorials. JavaScript continues to make a strong presence in helping to evolve UI components for websites. The examples provided in this document, clearly illustrate, integrating Vue and React are simple. It is worth the time to continue to investigate the use cases of combining a JavaScript framework into your ColdFusion applications. Creating .cfm templates with pure JavaScript is certainly possible, but with the help of the frameworks covered in this tutorial, Vue or React will provide you with an enhanced capability of creating rich, dynamic UI components and features. As things continue to modernize it is important to stay on course in the dynamic space of Front-End development. JavaScript frameworks will continue to battle each other for the supreme spot of popularity, but one thing is for sure, JavaScript is here to stay and the functionality it provides to your Web Applications should not be ignored. Implementing JavaScript Frameworks into your ColdFusion Applications will only strengthen your applications appeal, reduce development time, and improve the functionality for your users. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download