Workshop: Test Drive a Browser Game With JavaScript

Talks

Zach Briggs

#test-driven-development

Workshop: Test Drive a Browser Game With JavaScript

by Zach Briggs and Todd Kaufman

The video titled "Workshop - Test Drive a Browser Game With JavaScript" features Zach Briggs and Todd Kaufman discussing modern JavaScript development practices, particularly in the context of improving a browser-based game. The workshop aims to provide participants with hands-on experience in JavaScript testing, writing modular software, and building thick client web applications using technologies like Jasmine, Lineman, Rails, and Angular, although the core principles extend beyond these technologies.

Key points discussed in the workshop include:
- Introduction of Test Double: Todd Kaufman briefly explains Test Double's mission to prioritize developer happiness and its work with clients who value high-quality developers.
- Engagement with Participants: A poll is conducted to gauge participants' familiarity with JavaScript and testing frameworks. The workshop encourages collaboration through pairing participants for coding exercises.
- JavaScript Styles: The presenters cover different styles of integrating JavaScript in applications, such as minimal JavaScript to enhance user experiences and leveraging frameworks like Angular for handling user interactions effectively.
- Building a Simplified Battleship Game: The main practical component involves building a simplified version of a Battleship game where participants engage in coding to implement features such as attack coordinates and game status updates. The presenters discuss strategies for utilizing Angular for dynamic content rendering, demonstrate the binding of DOM elements with JavaScript variables, and show how to initiate user interaction through events.
- Hands-On Coding: Participants are urged to follow along with coding sessions where Zach and Todd provide guidance, address bugs, and explain code features incrementally. They emphasize the importance of immediate feedback during coding to enhance learning outcomes.
- Testing and Refactoring: As the game is built, the presenters shift towards best practices in testing and refactoring the code, advocating for a clean separation of concerns and creating a public API for game functionalities, enhancing maintainability and testability.
- Final Considerations and Freedom in Code Structure: The workshop concludes by encouraging developers to experiment with their code structure, emphasizing that while frameworks like Angular have their benefits, a practical approach that prioritizes clean and modular code will reduce complexity.

In conclusion, the workshop not only imparts technical skills related to JavaScript and Angular but also encourages developers to reassess their approaches to coding, focusing on happiness and usability. The session illustrates the balance between theoretical practices and real-world applications, ultimately fostering a supportive learning environment.

00:00:18.560 Hi everybody! This is a workshop titled 'Test Drive a Browser Game with JavaScript'. I'm Zach, and this is Todd. Justin will be joining us shortly. We all work for Test Double, where Todd and Justin are the co-founders. Todd, could you provide a brief overview of what Test Double is?

00:00:43.680 Sure! Test Double began two and a half years ago because we wanted to prioritize developer happiness above all else. We're on a mission to find clients who enjoy working with us and who have hard problems that value elite developers. Whether you’re a potential client, candidate, or interested party, we’d love to talk to you. Whether it's for consulting services or potential job opportunities, we want to interact, help you overcome challenges, and improve JavaScript testing. You can reach us via email at [email protected].

00:01:25.280 Now, let’s go over the general structure of the workshop. We’ll briefly cover why you might care about JavaScript. After that, we will pair up for hands-on coding. I will type some examples on the screen and give everyone time to catch up. Then we'll break into pairs for a more interactive session while checking in every 25 minutes.

00:01:56.159 To kick things off, I’d like to poll the room. How many of you consider yourselves comfortable with JavaScript and testing it? Okay, that's about the ratio I expect to see. Now, how many of you have used some kind of framework in production? Great! How many of those are familiar with Backbone? How about Angular? Ember? All right, looks like we have a fairly even distribution here.

00:02:26.239 For our workshop today, we’ll primarily use Angular for updating the DOM. However, this is more of a detail and not the core principle of the workshop.

00:02:40.320 So, why JavaScript? Everyone here has signed up, so I assume you're somewhat convinced of its importance. I want to address various coding styles I often encounter when working with JavaScript projects. One common issue is having absolutely no JavaScript in a Rails application, which leads to chaotic, unmanageable code. Ignoring JavaScript neglects its status as code, akin to Ruby, and can really create a painful experience.

00:03:05.280 Our first goal here is to mitigate those pains and relieve the pressure many feel when dealing with the complexities of jQuery swamps. Another style I've started seeing is a combination of Rails and Angular, where Rails handles HTTP routing effectively, while Angular manages user interactions. We can blend rendering between the two, using whichever is more suitable.

00:03:45.440 Then we have a style closer to a single-page app, using JavaScript for all routing and rendering, with Rails acting primarily as an API. Both approaches are valid and can lead to a more enjoyable experience while creating dynamic, interactive applications.

00:04:05.280 The joy of building front-end code is being closer to the users' experience. Watching your application update live without needing a refresh can truly be remarkable. I want us to have fun while building cool things today.

00:04:40.760 Now, just to clarify, we have moved beyond test-driven development, correct? Does anyone agree with DHH's keynote earlier this week? It’s interesting to see the polarized perspectives in our community; one insists everything must be test-driven, while the other claims that TDD is dead. I believe there's a practical middle ground, where a vast majority—about 98 percent—find value in some form of testing.

00:05:06.000 We can utilize test-driven practices without adhering strictly to every tenet. Some things may be browser-driven, and we can't forget the value of using debuggers, which are critical to our development process. What we want is a short feedback loop, allowing us to produce designs that are functionally correct and maintainable for the future.

00:05:48.560 I want to approach JavaScript with the same lens we use for Ruby, applying good practices consistently across both languages. Our goal is to find happiness with our coding experience instead of being bogged down by JavaScript.

00:06:01.760 So, if you're not already paired with someone, please find a partner. Our TA volunteers will assist you if needed. Once you've settled in, try to pull down the repository. If you're having Wi-Fi issues, we do have USB sticks available.

00:06:41.440 The project contains two folders: 'lineman start' and 'static start'. If Lineman isn’t running for you, proceed to the 'static start' folder. It contains the same files, but it's set up with static files. Once you’ve got that open, aim for either localhost 8000 or by opening the index.html file directly.

00:07:01.600 How's everyone doing? I’ll be typing some code on the screen. Does anyone feel anxious about trying to keep up?

00:07:14.720 Alright, I’m going to get started. There won’t be an overwhelming amount of code, so don't panic. If you do fall behind, we will help you catch up later. Also, feel free to collaborate with your partner. As we proceed, there are samples of the finished application that you can refer to for syntax examples.

00:08:11.840 In developing this game, I have color-coded different sections in the code to illustrate which concepts change after everything is initialized. For example, certain sections which indicate 'shots made' are coded red, whereas static areas are indicated in blue.

00:08:56.639 Today we're simplifying the classic game Battleship, where you'll have the opportunity to take shots and see results, but with an opponent that does not retaliate, somewhat like airstrikes. The gameplay will let you enter coordinates and determine if you've fired successfully or missed. The grid will also update to reflect your outcomes and notify you if you've won.

00:09:45.440 The design incorporates a grid based on elements discussed from Wikipedia. In brief, we’re focusing on a section that allows input of coordinates. Once I'm set up, we’ll link everything properly so a user can interactively see their input reflected on the page.

00:10:45.760 Now, I want to dive into the actual code. Let’s change directories into the 'lineman start' folder and navigate to the index.html page. If there are any issues locating it, don't hesitate to ask the TAs for assistance.

00:11:29.600 As I open the index page, you'll notice some mustaches that represent dynamic content. I deliberately kept those to demonstrate instant feedback in our HTML. This is part of a strategy to help iterate and see changes in real-time. I’ll be adding functionality now, namely the ng app directive to initialize Angular.

00:12:30.120 Next, I'll establish an Angular module called 'app'. If you refresh the page now, you should see that the previous calculation of one plus one equals two appears, confirming that our module is linked properly.

00:13:16.400 To add more features, I will also incorporate an Angular controller into our application. Each controller is responsible for passing data chunks to the view. In this case, we're keeping it simple, consolidating our functions into one controller.

00:13:59.840 Now that we've created our controller, I want to ensure that all necessary functions are called and visible. If we refresh the page again, we should be seeing the previously defined scope elements.

00:14:34.000 I am now discussing about how to declare functions on the scope and show how these functions can interact with the DOM. This is important as it allows JavaScript to provide dynamic content seamlessly.

00:15:15.920 Next, we will modify the status function to provide feedback based on user input. When you type something into the input field, it should trigger an alert indicating the action taken. I will be connecting the input to the scope to use it effectively.

00:15:58.560 Through the ng click directive, we set up a function called 'fire' that will display the coordinates where the user intends to shoot. This will help us track user interaction better and create a more engaging experience.

00:16:37.600 Let’s even add a bit more functionality. I’ll add a new input field and connect it to the scope so that the input is reflected upon interaction. This is crucial for ensuring user actions are responded to in real time.

00:17:30.560 From here, the next steps involve integrating our game's logic with the user interface. My goal here is to create a smooth user experience where players feel engaged while they play.

00:18:17.680 Now that we've introduced the initial feature, I'd like to challenge each of you to implement the logic that determines the game's state based on user input. This means if you input coordinates, you will have feedback showing whether a ship was hit or missed.

00:19:12.000 To aid this check, I'll structure the simulated environment so if a user tries to take a shot, the underlying logic determines if it hits a target or misses. This will integrate nicely with our UI.

00:20:02.680 For the next phase of our workshop, I encourage you all to pair up, share your thoughts and ideas, and implement the functionality we've discussed. Take this time to enhance your game through collaboration and experimentation!

00:20:54.400 As we work on this together, remember that coding can be challenging, and it’s natural to hit some bumps along the way. If you find yourself getting stuck, don't hesitate to raise your hand for assistance. We are all in this together and here to support each other.

00:21:48.760 Once we regroup, we’ll share solutions, discuss what worked, and identify any issues. After that, we will delve into testing, which is crucial for ensuring continuous development and reliability in our code.

00:22:43.360 As we progress, you’ll learn the value of testing and how it plays into maintaining a clean and functional codebase, especially within a JavaScript framework like Angular.

00:23:08.240 In this next segment, we'll focus on pulling out certain logic from our controllers, allowing us to isolate functionalities for better test coverage and reusability. This separation of concerns is a best practice that streamlines your development process.

00:24:00.000 We'll continue to enhance our game by integrating those tested functions back into our Angular application, ensuring that they interact seamlessly with the view. By the end of this workshop, you will feel comfortable with both JavaScript integration and implementing testing in your applications.

00:24:43.840 As you work through these exercises, keep in mind the responsive nature of JavaScript and the advantages of using a library like Angular for creating dynamic experiences. You will see how this approach empowers you as developers and simplifies your workflow.

00:25:38.600 By the end of our time together, we hope to have a fun, engaging Battleship-style game, complete with all the dynamic functionality you've contributed to and learned to implement. Let’s get started!

00:26:27.360 As we finish setting up, I want to highlight that the focus today isn’t just on building but also understanding how to maintain and adapt your code. You’ll find this skill will serve you well in future projects.

00:27:22.640 Finally, as we get into the coding phase, always remember: it’s fine to make mistakes; that’s how we learn. Embrace this workshop as a learning opportunity, and feel free to express your ideas freely!

00:28:09.440 Now, let's dive deeper into our code. Today, we’ll focus on creating various components that reflect the game state accurately while ensuring consistency across your code. I’m thrilled to see what you come up with!

00:28:58.000 Let’s work together, pair up, and share ideas on how to best implement the game mechanics while making use of the JavaScript framework at our disposal. Don't forget, collaboration will often lead to the best outcomes.

00:29:51.920 We’ll check in with each other for feedback and offer support wherever necessary as we proceed forward. This collaborative spirit is essential for motivation and creativity in coding environments.

00:30:42.600 As we approach the conclusion of this hands-on session, prepare to reflect on what’s been built and learned together. Sharing your insights is tremendously valuable to everyone in the room.

00:31:35.040 I hope you’re enjoying the process as much as I am and finding a sense of accomplishment with each step closer towards achieving our goal. Let’s continue building great experiences!

00:32:24.560 Feel free to explore different solutions and approaches as we finalize our implementations. There’s often more than one right way to code a function!

00:33:14.240 With collaboration and creativity at the forefront, let’s make the most of the remaining time together. Remember to share your findings—it might just lead to better solutions for everyone!

00:34:05.520 We’re almost there, and I can’t wait to see how all of your unique contributions enrich our collective project. Keep asking questions and offering support to each other as we approach the final stages.

00:34:59.920 At this point, I want to remind everyone about the importance of testing in your projects. Don't underestimate its impact. A solid testing strategy will enhance maintainability and reliability in your code.

00:35:45.760 As we bring this workshop to a close, I look forward to hearing your thoughts and experiences. Sharing what you’ve built and how you approached various challenges enriches every single one of us.

00:36:36.920 Thank you all for your active participation and engagement throughout this workshop. I hope you found the experience valuable and look forward to seeing how you apply these skills in future projects!

00:37:27.680 Remember that the knowledge gained from these hands-on tasks can significantly benefit you in your coding journey. Best of luck with everything you create moving forward!

00:38:14.360 Finally, I want to thank you for being part of today’s workshop. I encourage you to take the lessons learned here and continue to explore JavaScript and Angular with enthusiasm.

00:39:02.320 As we say goodbye, I invite you to keep in touch and don’t hesitate to reach out if you have questions or want to share your progress on your projects!

RailsConf 2014