I had come across Wix a couple years ago when researching cloud-based platforms that could potentially host a wedding website. My fiancé and I wanted to create a simple website that held all the information for our upcoming destination wedding in Mexico.
I had previous experience coding websites from scratch using HTML, CSS and JavaScript. I also had previous experience using Content Management Systems such as Drupal, Joomla and WordPress. My fiancé however had no such experience so it was important for her to be able to create, update and manage content on our wedding website without any technical knowledge at all. Wix was the perfect answer.
Wix allows users to create HTML5 web sites and mobile sites through the use of online drag and drop tools. No coding skills are required!
Fast forward a few years and Wix have now released Wix Code (which at the time of writing is still in Beta). What? - I thought the whole point of Wix was that you don’t need to know how to code!? Well, that is still true if you just want to create a basic website, however Wix Code now allows you to create more advanced websites. Websites that utilise dynamic pages, custom JavaScript, back-end databases and/or third-party API’s.
Wix Code makes it easy to build web applications and robust websites. It’s serverless, hassle-free coding. Set up database collections, create content rich websites, add custom forms and change site behavior with our APIs. All built with the stunning visual components of the Wix Editor. Plus, anything you create is SEO compatible.
I already knew the Wix interface and I had previously created several websites using Wix, so I signed up for the Wix Code Beta and started playing around. I also had an idea for a website already (compareyourlife.com) which required a database and some custom JavaScript. You can read more about my idea on my previous blog post.
To gain access to Wix Code you first need to request access to the Beta. Once access is granted you can enable Developer Tools in the Tools menu of the Wix editor.
Once enabled, you get access to a few extra panels as detailed below:
Site Structure sidebar (left)
The Site Structure sidebar shows all of the files that make up your site, including pages, lightboxes, files, routers, and database collections. I found this to be a very simple and intuitive navigation system. If you know how to use File Explorer (Windows) or Finder (Mac) then you’ll be fine using this sidebar.
Properties panel (right)
The Properties panel lets you quickly program user interactivity with elements on your site. Each element on the page has an ID (think CSS id selectors) and by using the Properties panel, you can quickly add event handlers to your elements with just a couple of clicks, i.e. if someone clicks this button, then execute this bit of code. I love how all the events are just automatically there in a list, specific to which element is selected on the page. Very cool!
Code panel (bottom)
You edit the JavaScript code for your site in the code panel, which is displayed at the bottom of the Editor. The code panel has a special toolbar and two tabs that contain the JavaScript code for an individual page or the entire site. And it performs just like any other code editor, i.e. it has syntax highlighting, indentation, autocomplete, brace matching etc…
Wix Code Review
Now, I can only comment on the components of Wix Code that I utilised to create my website. These were; User Input Elements, Database Collections, the wix-data API and Event Handlers with custom JavaScript.
User Input elements
User Input elements allow you to capture and store user data in a database collection or use the captured data to do something else using JavaScript. I started off using Wix’s very own Date Picker to capture a user’s birthday. But it had a few limitations.
You could not put a previous date in the Date Picker’s text-on-load, only today’s date or placeholder text.
You could not limit the selectable date range to be between two specific dates. The only options were to prevent selecting future dates and prevent selecting past dates.
And I didn’t like that as an end-user, you had to manually click through all the months to choose one instead of selecting the month from a simple drop down list.
So, I ended up choosing to use three Drop Down lists instead - one for each field; Day, Month and Year. This was more work but it provided for a better end-user experience. The user selects their birthday using the Drop Down lists and this input is then captured and used later on.
Database Collections
A database collection is a table of data that you can use in a Wix site. Each row in the table represents an item in the collection. Each column in the table is a field in your collection, which can be of a specific data type. One or more collections make up the website’s Database. Each site has two databases that are separate but related to each other. One database is the site's Sandbox database, and the other is the site's Live database. The Sandbox database is where you work while developing your site. The Live database is what your users interact with when your site is published. Still with me? ;-)
I have to say it was very easy to set up a database collection, however there will still a few limitations that I came across. For example, there currently seems to be no way to delete a database collection, so you end up having a long list of database collections in your site structure that are not being used. And you can only copy items from the Sandbox to the live database. You cannot currently replace, update or merge items which is a bit of a pain.
In any case, I created a database collection and added all my event data to it. The event data was pulled from Wikipedia using the Wikimedia API.
The wix-data API
This API is used for working with your site’s database collections. It gives you direct access to your collections, allowing you to perform any data operations for querying and editing collection content.
Wix also has a more visual / user-friendly way of connecting the data in your database collection to your website using something called Datasets. Datasets are for those who have limited data retrieval requirements and/or are not comfortable using the API. It’s essentially another element that you drag, drop and configure using the visual editor – no coding required.
For me, I required a complicated data query with multiple filters and sorting rules, so using the wix-data API with some custom JavaScript was my only choice. It was also a piece of cake to implement with all the great API reference documentation available here.
Event Handlers with Custom JavaScript
An event is something that can happen to an element, usually as the result of a user action. For example, onClick is the event that occurs when a user clicks an element. If you want your site to do something, or react, when an event occurs to your element, you add an event handler to your element. An event handler is the function that holds the code you want to run when an event occurs to an element. Your site watches elements to see if events happen to them. If an event happens that has an event handler, the code in the event handler function will run.
So when a user enters their birthday using the Input Elements that I mentioned before, an event handler runs which contains some JavaScript code that uses the wix-Data API to retrieve historical events from the database relating to the users age and then populates a table on the website with the results. Interesting facts about coding JavaScript with Wix Code;
You can’t add third party JavaScript library’s like jQuery. Wix provides its own library to manipulate / animate elements on your page, which is good enough for most situations, but by no means as powerful as some of the third party JavaScript library’s out there.
Wix Code only allows you to add JavaScript to your website, but not HTML and/or CSS – which I guess makes sense. Wix’s main advantage all these years has been its beautiful templates and I like that the visual and layout elements are still managed through the Wix Visual Editor. It is however a constraint on the platform, so I thought I should point it out.
Website load time seems rather slow compared to other websites that I’ve built from scratch in the past. My site has only 200 lines of JavaScript. That’s all. And it’s not like I’m importing tonnes of third party JavaScript libraries. Nor do I have a huge amount of images that need to load. I’m not sure why I get a number of timeout violations in my JavaScript console and why the whole site in general feels slow to load…
Conclusion
At the end of the day, Wix Code is a massive leap forward for an already popular Website Development / Hosting company. Wix Code is a delight to use and simple to learn. It surprises me though that the tagline for Wix Code is “Creation Without Limits”. After spending a good amount of time using Wix Code I have to somewhat disagree with this statement. Of course there are limits, as identified in this blog post. It’s never going to be everything to everyone. Wix Code is still in Beta and I’m sure it will keep improving. Even so, I would still recommend it in it’s current state to anyone looking to quickly spin up an advanced website without worrying about all the hosting infrastructure, database maintenance and back-end set-up.