Structuring a Web App with a Continuous Integration Workflow (CI/CD)

💛 Linode Cloud Hosting For Developers (Episode sponsor)
Use code FUNFF19 to get $20 credit on your new Linode account

WARNING: Very much a DEV OPS episode! Mostly CONFIG and discussion! 😂

WARNING 2: This is what REAL development looks like. NOT A TUTORIAL! 🙀

Messing around with the Node and React app that is powering the Twitch overlay, with the goal of displaying Twitch subscriber notifications in the info/sponsor carousel. Explainiong the Continuous Integration (CI) and Continuous Deployment (CD) workflow.

📝 Episode notes

⏰ Quick jump
00:50 What we'll be doing in the episode
01:42 Explaining what the app is, how it is built (a mess), and its challenges
23:23 Destroying ears for everyone by starting to chew gum 😋
26:32 Showing how CircleCI works
46:01 WRAPPING UP! Deciding what to do next together with chat!

💛 Follow on Twitch and support by becoming a Subscriber
We record the show live Mondays 7 AM PT

💛 Fun Fun Forum

💛 mpj on Twitter

💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:

💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:

💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly YouTube shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.

🤦‍♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.

Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.

📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.

⏯ On Fridays, an edited version of the show is adapted for and published on YouTube.

Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Software Development, Project Management

[leonk]

I think a big benefit of a strong type system is that it helps to visualize the data. For websites and such types don't really make sense, because you're mostly displaying stuff and doing front end logic.

But for backend applications, it helps a lot. Not just with catching errors, but with thinking about the code in general.

While the point that types do bring a lot of verbosity and maintainance with them, that really depends on the type system.

Languages like Haskell wouldn't work without their types.

I for example love kotlin, for it's type system. Types are rarely something you'll need to specify, IDE support is brilliant, and organising data into data-classes and working with sealed classes to create algebraic data types is really helpful for visualizing the data.

I love javascript for it's simplicity and power, but languages like kotlin don't really take more code to accomplish something, but do help in having a strong understanding of what kind of data you're working with. A strong, null-safe typesystem FORCES you to write good and safe code, while not needing more code to accomplish it. I love it!

You should really give other type-systems than c# and flow/typescript a chance. Maybe try kotlin, with it's sealed/data classes and null safety, or try to use scala with it's even more functional approach ;)

[Sofieew]

Always fun to find a fellow Swede on here! Thank you for a nice walkthrough and Glad midsommar!

[LosEagle]

When Rich Harris joins the show just keep referring to him as "The Svelte Guy".

[edgardoarriagada]

The sponsor this week is Kellogg's!

[danieldouglas]

I wish I had a David supplying me with gum while I code

[junkgrave]

Towards the end, you said that you like static typing for parts of your code that DON'T change, and don't like it for parts of your code that you need to change. You're missing the entire point of static typing. Static typing is for refactoring code. It's only there to let you change your code more easily. Static typing enables you to do 100% perfect static refactors. It lets you change the parameter list in that function, or break that class into multiple classes, or move the function to a different module, or do ANY change you desire, all while automatically updating all consumers of the function/class 100% perfectly, every time. No search/replace, no wondering if you missed anything, no leaning on the very imperfect intellisense. Without static typing, changing code is labor-intensive and error-prone. With 100% static typing, it's flawless and instantaneous to change code, so people clean up their code more and can adapt their code to different business applications more rapidly.

[francescocappelli]

Great job man, as usual; may I suggest a video on micro Frontend????

[RobbieSherman]

can anyone answer, is the code on a public (not patreon) github repo?

[lamkask]

Please, start making short videos again, how can I watch this?