First of all, WHY?
Any angular developer would tell me I was crazy, and why not just do the entire thing in Angular. The answer is: Because it is already in wordpress and the client has been asking for a lot of shortcode tools for custom forms and other features that require some more complex client-side work.
Now, we could easily do the exact same modules using simple HTML templates and JQuery, but Angular Components changed things for us.
Basically, if we had a contact-us form on our Angular website, we’d simply have <contact-us></contact-us> And angular would call up the component, run the code and add whatever HTML you defined for it. An Angular programmer can make these angular components extremely quickly and easily.
Has anyone looked at the awful mess that wordpress requires you to work with?
First, let’s assume that we have included angular in the header, added ng-app to the body tag, etc… so components will work. It’s a bit of extra weight, but in reality, the minimized angular is negligible and, if you’re using a CDN, probably already cached on the user’s browser. Still, you’re going to be adding, at a minimum, 2 includes; one angular and the other your code.
Here’s a super simple wordpress shortcode that we inherited:
add_shortcode( 'form', 'form_func' );
function form_func( $atts ) {
extract( shortcode_atts( array(
'form_name' =>'',
'form_url' =>'',
'description' =>'',
'form_image' =>''
), $atts ) );
$form_image = wp_get_attachment_image_src( $form_image, 'full');
$form_image = $form_image[0];
$url=vc_build_link($form_url);
$href=$url['url'];
$form_image=aq_resize($form_image, 75, 75, true, true, true);
$title= '
‘.$form_name.’
';
$imagebox = '
‘; return ‘
‘; }
You might be better off just cleaning up that mess, but look at this:
add_shortcode( 'form2', 'form2_func' );
function form2_func( $atts ) {
extract( shortcode_atts( array(
'form_name' =>'',
'form_url' =>'',
'description' =>'',
'form_image' =>''
), $atts ) );
$form_image = wp_get_attachment_image_src( $form_image, 'full');
$form_image = $form_image[0];
$url=vc_build_link($form_url);
$href=$url['url'];
$form_image=aq_resize($form_image, 75, 75, true, true, true);
$retval = ''.$description.' ';
return $retval;
}
Ok, that’s cleaner, but not much, and now you’re going to have all that code in Angular and a bunch of other client side includes. It’s horribly inefficient! Why would you do that?
Because, this displays a single form. The next shortcode is a list of forms from a specific category. In that one, I can say [ form-list category-name=’some category’], which simply writes
Maybe later we have a product purchase order to view and it has all the details of a widget, then 3 manuals related to it, so we’d have [product productid=123] which would call up a nice product order page that also calls the list of related manuals, using our list component and then calls up the individual form template using the form-template component.
Doing that in Angular is 100% intuitive. It is designed for that. It does it EXTREMELY well. You can do it in PHP…. just as easily as you can do it in classic ASP. And it might be faster in the end. Heck, it would be faster if you did it in python. Even faster if you wrote it in PERL! Maybe even an assembler app that would make each component?
In the end, it comes down to money.
- Programming Ease
Many PHP Developers are sure to disagree, but if you’re using TypeScript, you’re probably loving it and going back to fix something in an old PHP website probably makes you cringe in horror. The speed and agility of the actual programming in TypeScript is simply amazing. It just gets faster and faster as you define interfaces and class objects. New staff can come in and just start work without completely destroying everything. The overall time savings is cost effective, especially when you take into account the new staff screwing things up.
- Stability
If you’re using complied Typescript, you’re going to have all your javascript in a nice tight scope. There’s going to be no cross-talk, and if you have a component that isn’t working, it isn’t even going to show up on the website. You could write this all in PHP, but honestly, sending angular a nice set of variables and having it built by angular is very nice and clean. You can put in a new component on a page without almost no risk of major problems. We’ve all spent hours dealing with scope issues. That is costly.
- Flexibility
Wordpress is cool for some people, but it gets extremely messy. Any client who is using wordpress should consider converting to something faster and more modern. Making Angular components allows you actually take your entire website, piece by piece and migrate it to another platform. We estimate code to have about a 5 year lifespan on average. If we can keep it around longer and reuse it as much as possible, then that lifespan is increased, more easily working off the amortized cost.
- Staffing
There are simply more people that know Javascript very well than WordPress backend coding very well. With Angular Components, the concept is so easy and clear that any good javascript programmer can make one pretty quickly if the environment is already set up. I’m predicting that PHP might go the way of Classic ASP. I have several old websites that are still in Classic ASP. I can’t find anyone reliable to support them. New students and people new to coding are learning Javascript at astronomical rates. From a business perspective, it’s a no-brainer. The more people in the labor pool, the wider the selection, the less it will cost and the less time you will spend trying to find someone to help.
