Technology Articles - Peter J Thomson

Using JavaScript with Laravel through Inertia and Livewire

For the upcoming Icehouse Ventures investor portal we chose to build the application using Laravel, which is a php framework. Frameworks like Laravel speed up the development process by providing a lot of the scaffolding that you need for a modern web app.

Mockup of the upcoming Icehouse Ventures Investor Portal.

We started off looking at using off-the-shelf tools such as venture capital fund management software and various online angel network platforms. But we couldn’t find any tools that would allow us to provide combined reports that showed a consolidated view of both direct angel investments into a company and indirect fund investments into the same company through a fund the investor was a part of. Investors told us that this was a mission-critical feature so they could evaluate their effective exposure to particular startup companies in their portfolio.

We also evaluated a range of other low-code and no-code solutions such as Salesforce and various template-based databases and website builders. These were ok, but couldn’t handle the depth of complexity investors wanted such as calculating IRR over long time periods, exporting PDF statements and ranking portfolio performance against other investors.

Laravel uses the classic Model-View-Controller architecture.

In the end, we chose php and in particular Laravel because of the robust stability of a MySQL database and the power of the Model-View-Controller approach to the code structure. MVC is a common pattern used in enterprise architecture to build scalable and stable software systems, the key elements are:

Model – A data model that manages your database and represents data as objects that can have relationships with other objects. For example, we have a model for Users and a model for Companies in the investor portal.
Controller – Traffic controllers that manage how data moves around your application. Controllers fetch data from the Models and send it to the Views. In Laravel, the controllers do a lot of heavy lifting in the background such as security, permissions, sorting and filtering.
View – Templates that render html and CSS for the end-user to see what you want to show them. Laravel uses a php and html template format with no JavaScript interactivity by default.

Adding JavaScript to Laravel

As much as I love php, we wanted to provide investors with a modern app-like experience. To do this we needed a modern JavaScript framework such as React (from Facebook), Angular (from Google) or Vue (an open-source JS framework). I chose Vue because it’s popular in the Laravel community, not owned by a giant tech company and is the fastest to learn for a non JS developer like me.

There are several approaches to getting front-end JavaScript frameworks to work with back-end applications like Laravel:

Approach	Advantages	Disadvantages
Single Page Application with API – The traditional approach has been to build the JS front-end as a single page application and feed the data through to the app using a private API.	By keeping things separate, it’s easy to focus on one thing at a time. Back-end developers can work on the back-end code and front-end developers can focus on the front-end code.	My experience with SPAs was that I wasted a lot of time keeping the API and the front-end talking to each other. Frustrating points included login tokens and data-table filtering. In a small in-house tech team there’s no such thing as separate back-end and front-end teams, we’re all full-stack by necessity.
Livewire – This approach allows you to use little bits of JavaScript inside your normal php templates.	It’s cool to have php everywhere and JavaScript only where you most need it. Like a modern framework approach to JQuery.	The disadvantage of Livewire is that it’s still mainly using php not JavaScript, so it doesn’t have the app-like feel of an SPA. It’s also not full-on best-practice JavaScript using Vue or React so you miss out on the Vue and React templates and resources.
Inertia – This is a new way to use JavaScript inside the MVC framework of a php app. The Model and Controller are in php and the View is in JavaScript.	Best of both worlds. Inertia lets php do what it does best (databases, models, relationships, security, etc) and JavaScript can do what it does best (render the front-end interface and provide interactivity).	Not technically an SPA. Requires some finesse to make it feel fully app-like and the progress loader is a bit clunky. Inertia puts JS right inside your php monolith so you now have a multi-language code base that might feel weird to some developers.

Livewire is a new method for using JavaScript inside a php template.

Laravel 8 was released recently and now includes both Livewire and Inertia as options for the default Laravel user interface templates (called Jetstream). This is exciting because it will expose these two new approaches to more developers. But it’s been confusing for a few developers who are used to thinking of JavaScript as a different world from php.

Inertia allowed us to use Vue JS in our Laravel app.

On balance, we opted to use Inertia for the Investor Portal because it kept our code base all in one place and allowed us to move fast and change things quickly based on user feedback. I’ve already had dozens of moments where we wanted to make a change to the way that something is displayed in the portal. It’s a true joy to be able to make a quick change to the Company model, flow it through the Direct Investments controller and have it pop up in the investor portal Vue file all in the same code-base, with easy Laravel debugging and easy feature-testing and front-end testing. By having Vue running inside Laravel I’ve upskilled quickly on JavaScript without having to go all-in on complex JS routing and data manipulation.

Notice the simple call to Inertia from the Controller. Just like a Blade template.

We also went for Tailwind CSS instead of the more established Bootstrap CSS framework. Tailwind is a utility framework approach which means that instead of single giant templates in CSS with little HTML tags you just layer lots of little HTML tags onto an element to make it look the way that you want. It seems messy at first but once you get used to it, it’s life changingly fast. Using Tailwind, Alipne JS, Livewire and Laravel is called the TALL stack and I’m calling Vue, Inertia, Tailwind and Laravel the VITL stack. (Some people prefer the name LIT for this stack but I think Vue is a vital part of what makes this approach so awesome).

Building software in-house is an unusual move for a Venture Capital fund but Icehouse Ventures has a unique approach that combines the scale of the Ice Angels network and the depth of major funds like IVX and Tuhua. Globally, the venture capital industry is being quickly re-shaped by increased investor demands for transparency & reporting and by startup founder demands for faster decision making & streamlined capital raising processes. Technology can be a force multiplier for us and having both php and a modern JavaScript framework like Vue in our toolkit means that we can move faster while still keeping things safe, stable and secure.

Advanced Video Conferencing for Remote Work

Now that everyone is settling into remote working, we are finding that being productive requires more than just having the basics of team chat and video conferencing in place. To generate real economic output in uncertain times you need to be communicating closely with your customers, suppliers and business partners. Experience suggests that there are actually three levels of remote working:

Internal communication and basic connectivity.
Client communication including meetings, events and training.
Productive deep-work including multi-party workshops and brainstorming sessions.

Understanding the type of interaction you want to create will help guide the setup for your meetings and the tools that you use.

Internal: Your IT team will probably already have set you up with some sort of video calling platform. You should check that this video calling tool also includes team chat, calendar integration and external calling as well as internal. This means that you’ll probably want to be on a professional corporate communications platform such as Google Hangouts, Microsoft Teams or Slack. These chat plus video calling tools are great for reducing email and smoothing out daily internal communication. Hot tip: Create a lot of ad-hoc chats with small internal groups around key projects, these are where th actual work gets done (not in the big all-company threads).

Client calls: For small group and one-to-one client calls, I advocate using whatever tool your customer is already used to using. If they use Skype, Zoom or MS Teams then find a way to use whatever they are using because it’ll be familiar and allow them to focus on the content of the conversation. If your client doesn’t have a preferred tool, then you can default to using whatever internal tool you already use because you’ll be comfortable with the tool and can share your experiences with your client giving them a chance to try it out. Hot Tip: Get yourself set up in advance with logins for all the most common video calling tools so you’re ready to go with whatever your clients use.

Large group calls: Video calls with a large group tend to stretch the internal communications tools a bit too far because these tools are usually designed for small internal team meetings. For example, Microsoft Teams only shows four people on screen at any one time. Zoom is becoming the market leader for large group calls and it’s worth getting to know the advanced features of Zoom before you need to host a large call. These types of large group calls are a passable substitute for networking events, professional presentations and team training. Hot Tip: Have a two-person hosting team with one person focused on managing the humans (moderating Q&A etc) and one person managing the tech (such as muting and unmuting people).

Presentations: For one-way presentations to a large audience, there is a whole range of dedicated webinar tools such as Crowdcast, Webinar Jam and Go-to-Webinar. At the Icehouse, we’ve been using the dedicated webinar tool inside Zoom for our Coronavirus Business Support Webinars. The key to good webinar presentations is a lot of practice (especially with guest speakers) and putting a lot of effort into encouraging audience interaction. Hot Tip: Nominate a ‘studio audience’ of three to five people to have their cameras turned on as an audience panel so the whole thing looks more interactive and the presenter has someone other than themselves to look to for feedback.

Zoom Meeting (Notice that everyone is shown in an equal grid.)

Tips for webinars and large meetings

Large format meetings are a great way for people to feel connected when we’re all working remotely and uncertain about the economic outlook. It’s great to hear about other people’s experiences and see how much we all have in common no matter what industry we’re working in. At the Icehouse, our team ran webinars and large format Zoom meetings with over a thousand people in the first week of lockdown and we had to rapidly arrange dozens of private Zoom calls to pivot our coaching and advisory activities. We’ve learned a few hard lessons along the way. Here are a few quick tips that apply whatever type of call you’re running:

Encourage everyone to turn their video on: Most people hate being on camera but having the video on for all participants is vital for making things interactive. Seeing everyone gives the presenter non-verbal feedback so they can see if what they are saying is landing. It also allows the participants to see each other which makes the whole thing more personal. It can also be useful for quick hand signals such as thumbs up and waving to attract attention.

Look your best: The key to decent video is to have the camera at eye level (or above) so put your laptop on a cardboard box or prop your phone up somewhere. It’s also important to have good lighting. Try to have any natural light coming from in front of you rather than behind you. Sitting in front of a window will cast you as a silhouette.

Clear audio: Wear headphones. Even if your computer has a decent microphone and speakers, experience suggests that laptop speakers are more likely to cause an echo and the default laptop microphone is more likely to pick up random background noise from around the house. Even a cheap iPhone headset is miles better than the laptop mic. Personally I use bluetooth airpods because I can easily switch them between my laptop and phone.

Use chat: Most video calling tools also have a group chat feature. Use this for general banter, sharing links and random comments on the topic at hand. The chat is a key part of making webinars and large format meetings seem interactive. People will only use the chat if the hosts and panellists start first so model the behaviour you want to see.

Facilitator: Having a strong facilitator on a video call is priceless. There’s always someone who goes on too long or doesn’t know when to let other people speak. A good facilitator can guide the conversation and keep everyone on track.

Zoom Webinar (Notice that the presenter is spotlighted and the panelists are shown in a strip at the top.)

Advanced Zoom Tools

We’ve been using the Zoom software extensively at the Icehouse and there are a few tips that are specific to the Zoom platform:

Gallery View: Zoom has a button at the top right that toggles between Speaker View (seeing only the person that is speaking at the time) and Gallery View (seeing a grid of videos from all the attendees). The host can toggle between these to set them for attendees. But attendees can override the setting for themselves. Our experience is that Gallery View is more friendly and engaging because you can see everyone at once.

Screenshare: Sharing a slide show is a great way to keep a presentation on track and keep the pace up but in the Zoom software the screenshare takes over the whole screen and hides everyone except the person that is speaking. There’s an advanced ‘side-by-side’ mode that allows you to see the Gallery View during a screenshare but no one ever finds that so we recommend keeping the presentations as short as possible and spending more time on Q&A.

Security: As Zoom has become more popular there have been a lot of press articles about privacy and security concerns about the software. Some of these sound alarming at first but most of them are just hype. My favourite example was a widely reported vulnerability that in practise required an ex-NSA hacker to have physical access to the device to exploit. If the NSA is breaking into your house to hack your laptop, then you probably have larger problems than Zoom.

Privacy: There has been a rise in Zoom Bombing which is the practise of randomly logging into other people’s calls uninvited and causing trouble. The cure for this is to be careful about where you share the links to your calls and to require registration in advance for large public calls.

Moderator: Having a tech person or at least an experienced power-user on each call alongside the facilitator means that one person can manage the conversation going on front-stage and the other person can manage things like chat, people waiting to join, banning any trouble makers and providing support for anyone who can’t get onto the call.

The Zoom Host Dashboard

My final tip is to over-share the links to your calls. Send the link when people first rsvp, then send a calendar invite, then send a reminder one hour before the call. Keep these reminders super short so they don’t annoy anyone.

We will be publishing best practise guides for remote working, video calls and webinars on the Icehouse website shortly along with an updated guide to the best Zoom privacy and security settings. You can follow along with all our Covid-19 support and resources here Icehouse 2020 Covid Support for NZ Small Businesses

Startup as a service

If you were the CEO of a large company, who would you turn to for help to recapture your lost mojo? How would you create, test and build new products? Big companies have been steadily getting worse at innovation, whereas startups have begun to eat the world. Small companies can move fast, take risks and attract talent.

Jon Gold at Makeshift — Startups can bring together designers (like Jon Gold, pictured) and developers in much more creative and agile ways. (Photo: Paul Clarke and Makeshift)

The brightest minds of the next generation are spending their weekends writing code at hackathons and quitting their jobs to build interesting startups. The jump is easier than ever thanks to the explosion of incubators and accelerators. It’s a brave new world, but it has left large, tired old companies looking for ways to become more agile.

A new trend is emerging where hot studios (that combine design, business and technology skills) are building startups from scratch for large companies. This new approach is reviving the patronage model from Renaissance Florence.

Continue reading Startup as a service