This article was sponsored by Wix. Thank you for supporting the partners who make SitePoint possible.
You probably already know that Wix is a cloud-based web design platform that lets users create stunning HTML5 websites using its online drag and drop editor.
Wix Code takes Wix to the next level, turning it into an open platform for building robust, content-rich sites and web apps. With Wix Code, Wix becomes a powerful and extensible tool for web developers.
Wix Code adds a bunch of new features and functionality to Wix:
- Dynamic pages
- Repeating layouts
- Custom forms
- Built-in online IDE
- Access to 3rd party APIs
- Call backend code from the front-end with Web Modules
- HTTP functions: Exposing your site’s functionality as a service with your own API
And, don’t forget, this is still Wix, so everything is hassle-free:
- It’s serverless: All this added functionality comes in a serverless environment that lets you get your work done without any of the normal full-stack development headaches.
- Just code and go: Wix Code has a built-in, online IDE and backend so you can just add the code you need to your page or your site, publish, and you’re live.
All these new features mean that you can think about the kind of site you want to build on Wix in whole new ways. Let’s consider an example.
Do you want to build a full-fledged real estate site, where users can browse your offerings and search by location or other property features? You probably don’t want to build a separate page for each listing, right? You might also want to let your clients sign up for your newsletter.
How about if, on the same site, you want to give your agents access to special pages with admin permissions so they can add or update listings in a database? Maybe they also need to maintain a database of all their clients?
Maybe you need to connect your site to an existing database? What if you have a dedicated mobile app and you want your site to integrate with it? Of course you want any changes you or your agents make to go live in real-time.
And it’s all within the Wix ecosystem so it’s hosted, secure, and SEO-compatible, and you never have to worry about scalability.
With Wix Code you can use all the stunning templates and styling options from Wix and add extra functionality and code to make your site even more awesome. This way you can focus on the fun part of making your site work exactly the way you want.
Imagine our real estate site. You probably want one database for your available properties, one for your agents, and another for your clients. But you’ll need to associate your agents with the properties they’re handling and also to associate potential clients with each property.
Now with Wix Code you can add a database with multiple collections to your site. The Wix Code database is automatically integrated into your Wix site so there’s no need to set anything up—we do all the magic for you. As soon as you create a collection, it’s available for you to use with the elements in your site, to either display or store data, all without writing a line of code.
You can also create complex data structures with reference fields so that one collection can refer to the records, or what we call items, in another collection. The Wix Code database also includes a permissions model that gives you control over which visitors are allowed to interact with your data and what they are allowed to do.
Once your collections are set up, you can use our wix-data API to manage your data. It lets you query your collection with a long list of functions to control your query results. It even has hook functions so you can add custom code that runs before or after different actions on your data.
One of the most powerful things you can do with a collection is use its content in dynamic pages, so let’s talk about that next.
Back to real estate. As your users browse your site, you want them to be able to view a dedicated page for each property. Each listing should be displayed using the same layout with the same basic elements. You just need the content of those elements to change and for each page to have a unique URL. That’s what dynamic pages do.
When you create a dynamic page, you design one page layout that’s used each time your site calls that page. And each time it’s called, it displays the content of a different item in your collection with its own URL.
Now you no longer need to create a unique page when you have a lot of data that you want to display in the same way. Just create a dynamic page, connect it to your collection, and you automatically get a unique page with its own URL for each item in your collection. And whenever your collection’s data changes, your page contents change automatically.
Dynamic Pages and SEO
The content in dynamic pages can change each time the page is displayed, and you’re going to want search engines and social networks to index that page for any of the content it could display. The SEO settings for dynamic pages let you control how your pages are indexed, and they let you reference the data in your collections for indexing.
You can control the page’s title, description, keywords, and social images using the data from your collection that’s associated with your page. You can also hide the page from search results if you want.
Forcing your users to browse your listings one page at a time isn’t the best user experience. You really want to show a snapshot summary of all your listings on one page that serves as an index. Each snapshot would have the same elements and layout, just with different content. Then your user could click on one to get to that listing’s unique dynamic page. Repeating layouts make this easy.
A repeating layout, or repeater, is an element that displays multiple items using the same layout. You create the layout you like, and then each repeater item uses that same layout to display different content.
Repeater items function like containers and are easy to design. You attach other elements to them, and then any change you make to one repeater item is automatically reflected in all the others.
You can use repeaters to display static content or you can connect the elements in a repeater to your data in a collection. This dynamically displays your content, with the repeater creating one repeated item for each item in your collection.
Once you’ve got your repeater set up you can customize your user experience with some code. Maybe you want to give your user the ability to filter what the repeater displays? Or maybe the repeater should display the results of a search on your data?
You can also use code to control the repeater’s behavior and appearance, based on user activity. Remember, the Wix elements are just your starting point—adding code with our APIs is where your creativity can really come through.
Now you want your customers to sign up for your newsletter. Or maybe you want to create an internal form that makes it easier for your agents to add or modify listings. Your custom forms need to have the basic input elements, but you also want to let users upload files or images. You also need different information to go into different collections.
Wix Code adds user input elements to the Wix Editor. These elements let you capture information that your users enter and store it in a collection. You can then use that data in your site.
The new input elements include text inputs, radio buttons, dropdown lists, checkboxes, date pickers, a file upload button, and more.
By using these elements you can create any form you want. You can also display existing data so users can modify content they’ve already submitted.
You can also add code to your form. This lets you customize your form to exactly meet your needs. You can create cascading dropdowns, add custom validation, build a multi-stage form, and collapse and expand form sections based on user input.
Wix Code includes a built-in online IDE that makes it easy to add code to your site with zero setup. This IDE works for your front-end files and lets you add page-specific code or code that you want to run on your entire site. You can also use the IDE to add code to backend files like data hooks, custom routers, web modules, and HTTP functions.
The IDE makes coding easy because all your code is automatically integrated with your site. The IDE also includes professional tools to make coding easier. These include code completion, so if you type $ (part of our element identifier syntax) and then press Ctrl + space, a pop-up window opens that lists all the elements on your page. Once you’ve got an element selected, you can use Ctrl + space again to get a list of all the properties and functions associated with that element. Along the way, the IDE also provides JSLint feedback to help you code using best practices.
To make debugging easier, any messages you log to your console in the front-end are displayed when you preview your site in the Developer Console in Wix’s Preview mode. Logs in backend code can be seen in your browser’s developer tools console.
With all of these new capabilities, there still may be some things you want your site to do that we haven’t provided out-of-the-box. Now it’s time to really dive into the code part of Wix Code.
Wix Code exposes APIs that give you control over every aspect of your Wix site. Use $w to add custom interactions to your site’s elements, wix-dataset to control the content your pages display, wix-users to identify your current user and their type, and a bunch of other APIs.
Access Third-Party APIs
We mentioned connecting your site to an existing external database. If that database has its own API, you can use code to get it done.
You can call 3rd party services in the front-end, or if you need to be secure, just add it to your backend code. Then you can use our web modules to call your backend code from the front-end.
Accessing an external service using its API probably means using your own private API key in the request. That’s not something you want to put in your front-end code, though you may want to trigger that call from the front-end.
You might also have other code that you need to run server-side due to security concerns, or because it calls other web services. Wix web modules make your front-end and backend communication easier.
Web modules enable you to write functions that run server-side in the backend, which you can then easily call in your front-end code. Wix Code handles all the client-server communication required to enable this access.
You’re wondering, can I debug these functions? Yup. Even though your code is running server-side, you can still log messages to the console in web module code. These logs are displayed in the browser’s console.
Do you worry that maybe your site design has a security flaw and someone could still get into your backend code? Web modules also have permission settings, so you can be extra sure that no one can access or use your backend code in ways that you didn’t intend, either through your site’s functionality or using a browser’s developer tools.
In case you’re curious, here’s what’s going on behind the scenes. When you import a web module on the client-side, you get a proxy function to the web module function. This proxy function uses an XMLHttpRequest to invoke the function in the backend. The runtime listens to those invocations and calls the appropriate function. The arguments and return value are serialized using JSON.
Your real estate agents aren’t walking around all day with their laptops. They’re working from their smartphones, and you’ve already got a dedicated mobile app that lets them manage their caseload.
How do you give that app access to your site’s functionality? What about sharing your backend? Integrating your site with automation tools? To do that, you’ll need to expose your site’s functionality as a service. You do this using Wix HTTP functions.
With HTTP functions you define an API for your site that other people or services can use to access your site’s functionality. You can create get, post, put, delete, and use functions, which are the requests that your site can receive from an outside resource.
You then add the code to your functions to customize what they do, and use the wix-http-functions API to customize what they return as a response.
By now you can see why we’re so excited about Wix Code. Wix Code is the first serverless platform that is specifically tailored for websites and web apps. It allows you to create robust, SEO-friendly, content-rich sites in an open platform that you can code and extend. And because it’s Wix, it’s hassle-free, hosted, and secure so you can focus on what you love.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja