The beginning of GSOC 2017 journey was a dream which was out of reach for me. But with commitment and passion I was able to finally make it a reality. The project I will be working over the summer involves improvements of the existing test suite for Joomla! 4 custom JavaScript libraries, implementation of new test coverage for vue.js components (extend basic HTML elements to encapsulate reusable code) in the New Media Manager and Vanilla JavaScript conversion.

Joomla! 3.7.4 has just been released (don’t know about this? Read the announcement here), then Joomla! 4 is a monster venture in front of past Joomla! versions. I know you might get curious about what's new with Joomla! 4 ? . Now let’s take a look at the new features supposed to be in Joomla! 4.
In this article, I'm trying to give you some basic ideas about what are the changes in Joomla! 4 JavaScript and JavaScript testing.

Moving towards the story, we need to focus on Unit testing even more than on the other aspects. Unit tests basically check a block of code of the program input, output and ensure that they all run as expected. These tests mainly help developers to check individual areas of a program to see where errors occur. So it’s very common in software development life cycle.
HTML/CSS are not functional basic languages so unit tests are not needed. But in the JavaScript world, there are many functions used in custom libraries.Things can get so complex that sometimes the developer cannot be certain that the code works exactly as it should. That’s why we really need Unit Testing. It plays a vital role and makes developer's life easier. So every unit test is made to check against an individual unit in JavaScript and it decomposes custom libraries in several functions.

The following diagram gives a basic understanding about how unit tests work.

Karma is a JavaScript test runner. Jasmine is a testing framework we can use in JavaScript unit testing. Basically, Karma provides helpful tools that make it easier to us to call our Jasmine tests whilst we are writing code.

Improving the existing JavaScript Unit Test coverage for Joomla! 4 is one of the main goals of this project. Just as the meme says, YES brace yourself ?. Plenty of new test scripts are added to the current test suite and the test coverage will be improved drastically. So the target is to deliver 100% JavaScript Unit Test coverage for Joomla! 4 before the end of this summer.

Joomla! 4 is using vue.js for building interactive web interfaces in the New Media Manager. Adding Unit Testing for those vue.js components are another part of this project. It's more about code management. Mostly modularization of the code, each component is responsible for a certain functionality in the Joomla! 4 New Media Manager.

Basically, vue.js is a JavaScript library for building web applications utilising a component-based approach. It focuses on the MVVM (Model-View-ViewModel) architecture pattern and Vue is more closer to “View” layer.

Vue.js scripts make it easier to create unit test coverage. Unlike other testing libraries, VueUnit does not concentrate on DOM traversal. Mainly it focuses on making programmatic manipulation of components much easier and you can use any test runner.

As I mentioned above, Joomla! 4 is a giant step ahead of previous Joomla versions. With respect to JavaScript we are trying to be lighter and faster in comparison to Joomla! 3.x. With that we need to reconsider the use of jQuery. All things considered … jQuery is JavaScript. jQuery can be supplanted with Vanilla JavaScript and CSS3.

I've been a substantial jQuery fan for the last few years. JQuery is fantastically simple to learn and comprehend, explaining why it’s so widely used and supported. It’s just simpler than pure JavaScript.

Now is the right time to end this relationship with jQuery, for many reasons:

• Application overhead
• Some devices need long connection and load time
• Lack of Performance issues
• Is NOT lightweight
• Legion of unnecessary abstraction
• Modern Browsers support JS ES6 and ES5 so most of jQuery's patches are really useless
• Use the platform, create less dependencies (Better path to ES6).

So what do you think? No need of jQuery anymore? You're right, we don't need jQuery at all. And that's what we are trying to achieve in Joomla! 4 ?.
If you still have doubts on how we are doing this VanillaJS conversion, have a look at at the image below.

Do not hesitate to visit the GitHub repository of this project.

A journey of a thousand miles begins with a single stepLao Tzo

It is a great pleasure to write my first blog post on Google Summer of Code project with Joomla and let me introduce myself.

I'm Supun Wanniarachchi, a Google Summer of Code student at Joomla. I’m a final year Software Engineering Undergraduate at Informatics Institute of Technology - Sri Lanka, affiliated to the University of Westminster (UK). This is my second time (last year project) as a GSoC student and I hope to do more, and even better with great guidance from my mentors Ruchiranga Wickramasinghe, Ashan Fernando, Yves Hoppe and Dimitris Grammatikogiannis.