Gavin Pickin discusses the development of TryBoxLang at ITB 2024, highlighting the rapid construction process that took under 48 hours. The presentation covers the technologies utilized, including the Monaco editor, and addresses challenges related to embedding, theming, and compiling code. Ultimately, the team successfully implemented a serverless solution using AWS Lambda to facilitate user interactions with the coding environment.

1. ROOM B
PRESENTED BY
GAVIN PICKIN
How we built Try
in under 48 hours

2. GAVIN PICKIN
SPEAKER AT ITB 2024
● Software Consultant for Ortus
● Work with ColdBox, CommandBox, ContentBox
APIs and VueJS every day!
● Working with Coldfusion since 1999 - V4
● Love learning and sharing the lessons learned
● From New Zealand, live in Bakersfield, Ca
● Loving wife, lots of kids, and countless critters

3. INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
I am sharing this story because:
- We dogfooded our own technology
- We used some cool technology
- The journey to the destination is just as
important
- It surprised even us what we could do, and
how fast

4. I am sharing this story because:
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
- We dogfooded our own technology
- We used some cool technology
- The journey to the destination is just as
important
- It surprised even us what we could do, and
how fast

5. Our Goals
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
- Give users a way to try BoxLang in the
browser with no download or installation
- Give users a comfortable dev experience
- Have an easy way to Embed it in multiple
sites
- Have a way to theme our editor
- Handle the load of our successful marketing

6. Parts
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
- What are we going to build the website with?
- What editor were we going to use?
- How can we make it Embeddable?
- How can we make it themeable?
- How to go from Code > Response?

7. What are we building the Website with?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
- MVP - Simple HTML Page
- Next level - CFML Website with index.cfm
- Ultimate Goal - BoxLang site with index.bxm
- No ColdBox
- No ContentBox

8. What editor are we going to use
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
- The Monaco Editor is the code editor that
powers VS Code.
- It is licensed under the MIT License and
supports Edge, Chrome, Firefox, Safari and
Opera.
https://microsoft.github.io/monaco-editor/

9. What can Monaco do?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
- Lots!!!!!
https://code.visualstudio.com/docs/editor/edit
ingevolved

10. What can’t Monaco do?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
- It cannot run the background services
powered by Node in VS Code
- Lose some themes
- Some extensions with LSPs, Debuggers etc
BUT its still awesome!!!

11. How can we make it Embeddable?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
- Should we Build it in React - NO!
- Should we build it in VueJS - Probably not
- AlpineJS - Maybe
We should use Web Components!!!!

12. How can we make it Embeddable?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
There is an existing Monaco Web Component
already out there.
https://github.com/vanillawc/wc-monaco-editor
Plug it in, and we’re DONE!!!!

13. How can we make it Embeddable?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
- Plug it in
- Choose Settings
- Default Code
… and we’re DONE!!!!

14. How do we make it Themeable?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
- Web Components supports attributes
- Web Components encapsulates your Styles
We will build some theme options and an
attribute to handle it

15. How do we go from Code > Response
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
- Editor will have code
- When the user clicks a button
- We’ll send this code somewhere via Ajax
- When we get a response, we will update the
UI to show the response

16. Where are we going to send it?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours
WASM
We haven’t build the WASM BoxLang Runtime
yet, so we can’t run it in the browser :(
Yet!!!!!

17. API
We can build an API endpoint that we can call
Where are we going to send it?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

18. What API?
ColdBox API?
GoLang API?
Python API?
Node API? (sssh don’t tell Brad)
Where are we going to send it?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

19. - We have the BoxLang OS runtime
- Should we call it with CFExecute
- Deal with Std-in and std-out
- Feels a little icky
- Will it scale?
How will we compile BoxLang Code
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

20. Maybe we could use Docker?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

21. Where’s the Docker image?
- We didn’t have a docker image yet
- Jon was busy working on real deep BoxLang
stuff, so I decided, I could handle that
- Build a CLI, and a Web Docker Image
- Let’s deploy our docker image
Where are we going to send it?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

22. Ssssh, Secret Squirrel
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

23. - Jon Setup ECR
- Jon Setup IAM Permissions
Let’s store them on AWS ECR
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

24. - After editing IAM permissions for 2
hours
- Finally I got the images built and
uploaded
Let’s store them on AWS ECR
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

25. Run BoxLang CLI in Docker?
We can run
docker run boxlang-cli $codeToRun
- Docker start is not instant… will it be fast enough?
- Will it scale?
Where are we going to send it?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

26. Run BoxLang in Docker Swarm?
- How do we know how many swarm nodes
are running?
docker service ls | wc - c | maybe
- How do we send the code to a less busy
swarm node?
docker service ls | grep | headache
Where are we going to send it?
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

27. Easy Button
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

28. - Handles startup
- Handles isolation
- Handles speed
- Handles scaling
- Handles the server (serverless)
AWS Lambda solves
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

29. - Luis said ok I’m on it.
- 2 hours later, he said “DONE”
- I said “done with what?”
- He said, Lambda Runtime, boom!
Now we need an AWS Lambda Runtime (2 hours)
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

30. - So after I spent too many hours
rebuilding all the stuff Luis had
already built - I threw all that in a
branch just in case it wasn’t a
complete waste, then I got to work.
Get the Lamba Runtime Compiling BoxLang (3 hours)
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

31. - Jon made me a user
- I tried to login but I couldn’t
- He reset my password
- I still couldn’t login
- He set my password, and I was in
AWS Lambda IAM Permissions (3 hours)
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

32. - Install the AWS Cli
- Install the AWS SAM Cli
Testing the AWS Lambda
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

33. - lets see the code
Tap into the BoxLang core
INTO THE BOX 2024
How we built TryBoxLang in under 48 hours

34. INTO THE BOX 2024
THANK YOU TO OUR
SPONSORS
INTO THE BOX 2024