I’m calling this “notes” as I should have started it ten hours ago...

This will hopefully become a slideshow at some point!

Vue.js in Tiki

By jonny Bradley
Virtual TikiFest 2020 June 15th

Apologies in advance, this is a slideshow without any animated gifs...

Except this one

%%

What is Vue.js and why should it be in Tiki?

• What is a JavaScript Framework?
  • jQuery (and MooTools etc) are JavaScript libraries, a framework does more than that, and generally provides a framework to create a whole application. We have had Zend Framework in Tiki for many years but only use a few parts of it.
    
• And which one would be best for Tiki (as discussed at TikiFestMacau2019)
  • Angular
    • https://en.wikipedia.org/wiki/Angular_(web_framework)
    • Lead by Google, was the first one, very mature but not really applicable to bolt on to an existing project
  • React
    • https://en.wikipedia.org/wiki/React_(web_framework)
    • Arrived later and is maintained by Facebook
    • Has some limits i forget what now...
  • Vue.js
    • https://en.wikipedia.org/wiki/Vue.js
    • Open Source & independent
    • Better suited to being added on to an existing project such as Tiki

So we picked Vue!

• Two videos worth watching for a proper introduction:
  • Why Vue.js video on https://vuejs.org/ summarises the above
  • Origins of Vue https://youtu.be/OrxmtDw4pVI (as Guill emailed a while back, thanks)
    
    
• Vue.js Components
  • There are lots of ready-made components - see Awesome Vue etc
  • ui-predicate seemed just right for Tracker Rules?
    

How to add it to Tiki?

• My JavaScript was (at least) 10 years out of date
  • So lots of learning of new things in JS i had been doing with jQuery for ages, such as forEach and arrow functions
• node.js / npm compiled/built JavaScript
  • Have to admit I've not got on well with that
• Tiki needs static files
  • A possible solution in single file components?
• Todo list demo here was encouraging
  

Fragile (kludge?) Solution for Tracker Rules

• So the plan was to generate static “single file component” style js files in temp/public
  • I started with a wiki plugin of course wikiplugin_vue.php
  • Which is a wrapper for a smarty object block.vue.php
  • Then a library vuejslib.php for all the machinery...
  • Which in turn allows you to write and then deploy Vue Components such as TrackerRules.vue
• It seems to work, so that might have to do? 😂
  • I just feel I cheated somehow...

Where Next

• Duration field in 22.x
  • Victor and Andon created a gorgeous duration picker and mini-chronograph app
    
• So What's Next For Vue.js in Tiki?

Project Fluffy?

• (A.K.A. Gadgets)
• This is the long standing idea to merge our plugins (which don't plug in) and modules (which aren't modules) and to have a common inherited Object Oriented system to manage them
• Vue.js is surely perfect for the job, right?

Any Questions?

Can do some demos (hopefully)

Thanks all, you can get me at jonny at tiki.org or via https://tiki.org/jonnybradley
(hey, someone broke my picture! 😬)