Welcome to our final installment of CF Camp 2018: Madness in Munich! This is our series pertaining to all things CF Camp 2018, the only CF conference in Europe. In our fifth and final part, we look upon Nolan Erck’s upcoming session, AngularJS + ColdFusion. Here he will discuss getting started with AngularJS and building a simple JSON API in ColdFusion. He will then show you how to interconnect the two in order to create a fully functional application.
In our article, we will discuss the importance of JS (Javascript) for client-side web apps and how it can benefit your company. I will also go on about exactly what AngularJS is and how you can get started. (Although, I will leave all the heavy lifting to Nolan during his presentation…) And now without further ado, let’s get started.
“What in particular I enjoy about coding in CFML, is the power and flexibility of the metaprogramming which we use day to day. You're not stuck with what the language gives you. You can really nice, and easily, use metaprogramming to extend it to create your own frameworks, and I know other languages do that, but it's always much more direct to do things in CFML without … Compare it to Ruby that does some nice syntactic sugar around that. It's more straight forward. It's not quite so obscure as a language. It reads much better.” – Dominic Watson, Technical Director at Pixl8 Interactive
From CF Alive episode, “007 Marketing Automation using the Preside Platform with Dominic Watson“
What You Need to Know as CIO
The Difference between Server Side and Client Side
Does understanding the difference between server-side and client side really matter for my business?
Absolutely.
The server-side environment (backend) is comprised of everything that is needed to generate dynamic HTML. This HTML is then sent to the client side (frontend) for use.
On the server-side of things your preferred scripting language is used whether it be Ruby, Python, or PHP.
Now of course, we all know that CFML with ColdFusion or Lucee is our language of choice. But is it your client’s?
In all likelihood, probably not.
You see, front-end applications are written almost exclusively in JavaScript (JS) alongside basic HTML and CSS. These are the scripts that are normally used to run a browser. JS is known as a client-side language because it is ideal for user interaction.
So… why would you try to communicate with your clients using CFML knowing full well that your clients only support JS?
IT JUST DON’T MAKE NO SENSE!
But… Why JavaScript?
Believe it or not, JavaScript hasn’t always been the cool kid in class. Once dismissed as buffoonish and amateurish by developers, JS has risen to the rank of most popular computing language. According to an lform.com survey, 65% of all programmers polled use JavaScript.
Heck, in our very own 2018 State of the CF Union, a whopping near 90% of CF developers asked used JS.
So what happened? How did JavaScript get to be such a dominant force in computer language programming?
Back in 1993, Marc Andreessen–founder of Netscape Communications– knew that a small scripting language would be needed to be the language glue with the DOM (Document Object model or the interface for HTML and XML docs). Through the creation of this language, web content could become more interactive, user-friendly, and dynamic.
Marc understood that this particular language needn’t be overly complex either. Instead he designed this language with graphic designers and part-time programmers in mind. His language shouldn’t be limited to those tech savvy and professional developers. Remember… this was the early nineties. Not everyone was running around with smartphones then.
And thus the idea of JavaScript was formed.
However, this idea wasn’t put into play immediately. But in 1995, Netscape commissioned Brendan Eich to create the JavaScript language. He was able to accomplish this in only 10 days. Just like that JavaScript was born.
After its release, it was later brought to ECMA International. EMCA International is an organization established in 1961 to set a worldwide standard for communication and information systems. JavaScript was adopted and turned into EMCA Script.
Throughout the following years, EMCA Script evolved and progressed. Doing so gave it more ground amongst the development community. As of today, 95% of all websites on the Internet use JavaScript according to W3Techs.
If these numbers don’t tell you that JS is important… honestly, I don’t know if you can be helped.
Here are just some of the advantages in terms of dynamic enhancements when using JavaScript:
- Autocomplete
- Loading New Content onto the Page without Reloading the Page
- Dropdown Menus and Rollover Effects
- Animated Page Elements such as Resizing, Relocating, or Fading
- Audio and Video Capabilities
- Input Validation for Web Forms
- Repairing Browser Compatibility Issues
On top of all this, the role of JavaScript can never be denied. This is because JS acts both as an Object Oriented Language and as a Procedural Language.
The Abuse of JavaScript
Remember, as CIO you ultimately make the calls when it comes down to your information technologies. Understanding that JavaScript is the catch-all of client-side operations can make your life easier. But what if it’s not? What should I not use JavaScript for?
In a perfect world, we would have one uniform language we could use seamlessly between both and front and back-end operations. Unfortunately for us, we don’t live in this perfect world. And no one language can provide this. So in order to determine what is best… You need to focus on the purpose of your actual application. There will be instances where JavaScript just won’t work. I mean you wouldn’t code the entirety of Star Wars: Rogue Squadron in JS. (Am I correct in this assumption Nolan?)
Just keep in mind the scope of your work when using any programming language. JS can be abused and pushed past its limitations easier than you would think just due to its adaptability and availability. With that being said, let’s take a brief look at what AngularJS is.
AngularJS
AngularJS (or Angular.js) is a JS-based third-party front-end framework created and maintained by Google. One of its key focuses is to simplify the testing and development of single page apps. This is accomplished by providing a steady framework for MVC (Model View Controller) and MVVM (Model-View-ViewModel) architectures.
HTML is great for declaring static documents. This goes without saying. However, HTML does have its faults when dealing with dynamic applications. In true JavaScript fashion, AngularJS increases the reach and capabilities of your standard HTML vocabulary allowing for more powerful and flexible programming.
One of the neat things about AngularJS is its ability to be fully customizable. You can alter every single feature in order to fit your own unique workload and situation. It is fully extensible as well and plays nice with other libraries.
*AngularJS refers to is the name for all v1.x versions of Angular. The name has been changed to simply Angular for the latest versions. I will be referring to AngularJS as Angular from here on out.
CF Tech Talk
“I just always had a passion for ColdFusion and I just you know it was described to me one time as kind of the Swiss Army knife of application tools and it always seems like there's a way to do anything with ColdFusion. No matter what the problem is there's always a way to solve it. You integrate whether even if you have to do some Java package or something, there's always a way to integrate it into ColdFusion. And lots of great resources out there that are from all the experts on the Internet.”- Mike Collins, Senior ColdFusion consultant at SupportObjective
From CF Alive episode, “062 Scaling Your ColdFusion Applications (Clusters, Containers and Load Tips) with Mike Collins“
ColdFusion has that wonderful ability to integrate. Especially with Java-based apps and languages. For those who tend to forget, Java is the actual heart of CF. So naturally, it will work exceptionally well with JS and Angular for that matter. So, the real question is…
How do I get started using AngularJS?
When getting started with Angular, I would personally recommend heading straight over to their website, https://angular.io. Angular doesn’t just give you an installation button though. They give you an introductory course which helps you to construct your very first Angular app!
This is an incredible process. They take you step by step from prerequisites all the way down to final code testing. This method is an exceptional way to do things. What’s even nicer is what happens after. After you complete the intro to Angular course and download the final application code, there is still a well-structured tutorial that will assist you every step of your way to becoming an Angular master. It even comes complete with a handy architecture style guide to make sure you understand all architectural components.
Whether or not these conveniences were a nuanced approach to the original purpose of Javascript, the folks at Angular sure make the language rather user-friendly.
Benefits and Features of Angular
According to Angular, the benefits of the language are broken down into 4 major categories:
- Cross Platform
- Speed and Performance
- Productivity
- Full Development Story
- Cross Platform Features
- Progressive Web Apps
- With Angular, you can use modern platform capabilities. This allows your user to have an app-like experience through great performance, offline capacities, and zero step installation.
- Building Natively
- You can now natively build mobile apps with Cordova, Ionic, and NativeScript.
- Creating Desktop Apps
- With Angular, you can also create desktop apps. This is done using the exact same methods you would use for developing your web page. Mac, Windows, and Linux apps are all able to be created, and you are allowed access to Native OS APIs.
- Progressive Web Apps
- Speed and Performance Features
- Code Generation
- Angular automatically translates your templates into highly optimized for modern JavaScript VMs. This gives you the best of both worlds. The ease of a framework with the precision of handwritten code.
- Universally Recognized
- Output the first view of your app on Node.js, PHP, .NET, CF, and other servers for immediate rendering in HTML and CSS. This allows for great potential of search engine optimization for those that rely heavily upon it.
- Code Splitting
- Using Angular’s new component router, your code is now privy to automatic code splitting. This allows users to only load code that is required to render the code requested.
- Code Generation
- Productivity Features
- Angular CLI
- We all know just how easy Ortus Solutions’ CommandBox CLI is. The same can be said about Angular’s CLI. With its command line, you can quickly and easily start building apps, perform tests, and deploy.
- Templates
- Now, you can quickly develop UI views with Angular’s cutting-edge template syntax technologies.
- IDEs
- Use the power of intelligent code completion, instant error recognition, and other check tools with Angular’s editors and IDEs.
- Angular CLI
- Full Development Story Features
- Animation
- Through Angular’s API, you can now create stunning high-performance choreographies and animation timelines with minimal code.
- Accessibility
- Accessibility has never been easier. Construct accessible applications with ARIA-enabled components, dev guides, and built-in a11y test infrastructure.
- Testing
- When it comes to testing, Angular has you more than covered. Use their Karma applications for unit testing and Protractor for all your scenario testing needs.
- Animation
These are just some of the many benefits of choosing Angular as your front-end platform for all of you CF back end needs. Angular is constantly improving and updating how JavaScript in general performs. Choosing a simple to use, universal front end for your CFML should be a no-brainer. Using Angular with our ColdFusion really helps to keep CF relevant and vibrant. ColdFusion has time and time again shown its ability to adapt to the waves of future tech. With its integration with JS (Angular in particular), ColdFusion has once again proved that it isn’t going anywhere anytime soon.
Because in the last 22 years I haven't found anything better. Bearing in mind, at any point in time, I usually have five or six clients, most of them are still ColdFusion, some of them are Java, but like I said, I worked on PHP and I worked on .Net. Those things don't have anything better than ColdFusion as for what it's doing, which is providing, the best of what it does is to provide a server mechanism to power front ends, whether your browsers or phones or devices or whatever. None of those other tools are any better. The reality is, there's a lot of fashion in development, and things go out of fashion.
What we must never forget, in my opinion, is without ColdFusion, the web as we've come to know it, the dynamic web would have been a long time coming. We have to remember, ColdFusion was around before Bill Gates thought the internet was anything worth thinking about, or at least the web.”-Mike Brunt, Senior Server Engineer at Go2RIA
From CF Alive episode, “009 Tuning & Troubleshooting ColdFusion Using Native Tools with Mike Brunt“
This concludes our series, CF Camp 2018: Madness in Munich. But just because our series ends doesn’t mean the show can’t go on. Be sure to catch us on the CF Alive podcast and stay up-to-date with all things CF on my blog only here at TeraTech!
About the Speaker: Nolan Erck has been developing software for 21 years. Starting in the video game industry working on titles for Maxis and LucasArts, then advancing to web development in 1999, his list of credits includes Grim Fandango, StarWars Rogue Squadron, SimPark, SimSafari as well as high-traffic websites for a variety of clients.
Nolan manages the SacInteractive User Group, teaches classes on aspects of software development, and regularly gives presentations at conferences and user groups across the country.
When he's not consulting or talking about himself in the third person, Nolan can usually be found working on one of several music projects.
Join the CF Alive revolution
Discover how we can all make CF more alive, modern and secure this year. Join other ColdFusion developers and managers in the CF Alive Inner Circle today.
- Get early access to the CF Alive book and videos
- Be part of a new movement for improving CF's perception in the world.
- Contribute to the CF Alive revolution
- Connect with other CF developers and managers
- There is no cost to membership.