CF Camp 2018: Madness in Munich Part Five- AngularJS + ColdFusion
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.
“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?
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.
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!
Heck, in our very own 2018 State of the CF Union, a whopping near 90% of CF developers asked used JS.
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.
If these numbers don’t tell you that JS is important… honestly, I don’t know if you can be helped.
- 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
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 (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.
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.
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
- 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
- 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.
- Now, you can quickly develop UI views with Angular’s cutting-edge template syntax technologies.
- 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
- Through Angular’s API, you can now create stunning high-performance choreographies and animation timelines with minimal code.
- Accessibility has never been easier. Construct accessible applications with ARIA-enabled components, dev guides, and built-in a11y test infrastructure.
- 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.
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.