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.
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!
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.
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)
Wix Code Review
User Input elements
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.
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.
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.
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.