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!
