00:00:06.359
Video equipment rental cost paid for by Peep Code.
00:00:19.519
Hi, my name is Yehuda Katz, and I'm giving a talk right now about jQuery.
00:00:25.760
In case it was not clear from the abstract, this is going to be a hardcore talk; it's not an introductory talk. First, I want to introduce myself: I am Yehuda Katz and I work at Engine Yard.
00:00:36.000
I work on jQuery, MB, and Data Mapper, which is an awesome stack.
00:00:42.440
What we're going to do is write an autocomplete plugin, specifically an edit-in-place plugin.
00:00:47.960
We're going to do it from scratch, starting with a test-first approach. If you're not familiar with jQuery, don't worry; we’ll move along together.
00:00:58.719
Now, let's talk about what I'm using for the test-first approach. I'm utilizing ScrewUnit.
00:01:06.240
ScrewUnit is an excellent way of testing jQuery, but unfortunately, it typically requires that you set up a complex directory structure.
00:01:24.439
Fortunately, we have a plugin for Merb that automates this process.
00:01:31.079
This tutorial doesn't really require Merb per se, but I'm using the MB ScrewUnit plugin because it simplifies our current task.
00:01:42.720
Just to clarify, the ScrewUnit spelling is s-c-r-e-w-u-n-i-t.
00:01:47.759
I didn’t create it; I'm simply using it.
00:01:53.560
This is an empty result right now. I need to turn on Merb.
00:02:00.520
So this is our empty result page, which, as you can see, has nothing happening yet.
00:02:14.239
I should have brought my phone, but I don't have a microphone.
00:02:19.480
Let me show you basically what is going on here. This is implemented as a Merb slice, which means all activities are organized in the slices directory.
00:02:30.920
Essentially, this is a small Merb app, and there’s a spec method that sets up everything necessary for running the specs.
00:02:46.959
There’s also an index that indicates where our specs are.
00:02:52.519
In terms of important files, we have the HTML file that will store what we’re testing and then the spec file which contains the actual specs.
00:03:06.200
Now, let's get right into writing a spec.
00:03:11.480
Let’s describe the autocompleter function.
00:03:24.360
It starts out as an edit-in-place function.
00:03:33.720
So, what am I doing here? This looks somewhat like RSpec. It's basically a port of RSpec to JavaScript.
00:03:42.799
Now, let's run the spec and see if it passes.
00:03:48.280
Fascinating! I don't know why it passed, but that's just a dummy spec anyway, so we'll make it pass right now.
00:04:04.319
Let's create a real spec that does something useful. ScrewUnit supports before filters, and we will use one here.
00:04:29.720
In this situation, we want to begin with the edit-in-place function state. We need to clear out and start from scratch each time.
00:04:54.600
Then, it should turn into an input box when clicked.
00:05:01.000
Let’s fire the click event. If you’re using jQuery, you know that this isn’t actually a real jQuery method; it’s a ScrewUnit method.
00:05:42.840
The reason we don’t simply use 'trigger' is that there are scenarios in a testing environment where it doesn’t work correctly.
00:06:08.880
Next, we want to ensure that the edit-in-place text is not visible. If we run the test now, we should check what happens.
00:06:34.360
Hmm, let’s figure out what is going wrong here.
00:06:58.479
I suspect it relates to the JavaScript file. This is specific to a Merb slice, which means it can include its own JavaScript.
00:08:03.039
I’m trying to troubleshoot and understand what is happening here. This is a live-coding environment, and it can create challenges.
00:08:41.959
Please bear with me while I debug this. This highlights the challenges of live coding.
00:09:10.560
Nonetheless, I've figured out some of the issue. We need to ensure our event fires correctly.
00:09:43.520
Let me get back on track.
00:10:00.320
Back to the intended flow, we still need to ensure that we check our assumptions on visibility and ensure we’re handling events correctly.
00:10:20.560
Now that I’m running the right function, we expect our specifications to behave correctly.
00:10:37.639
Let’s verify that we can make something visible as planned.
00:11:08.440
This is an essential part of the process, as visibility is where the user experience begins.
00:11:26.920
If the test is working as expected, we should receive the desired input box when interactions occur.
00:12:00.079
Let’s now add the spec for showing the input when clicked, confirming it meets completion criteria.
00:12:24.000
This confirmation will set the groundwork for another testing scenario.
00:12:43.200
We’ll structure it into a larger describe block and confirm that it integrates seamlessly.
00:13:06.440
Finally, once we add the appropriate confirmations, we want to ensure they meet all passive checks.
00:13:19.920
If we completed our task successfully, we will celebrate the successes achieved.
00:13:40.000
This method illustrates effective use of test-driven development, leading to well-structured outputs.
00:14:06.560
Let’s shift gears to focus on the next core component of our application.
00:14:16.000
We are adjacent to achieving a great process that supports further development and test cycles.
00:14:38.760
To summarize, utilizing tools like jQuery and understanding how to test effectively creates a more robust framework.
00:15:05.000
And that leads us into our next topic for discussion.
00:15:16.520
I want to pose a few questions and allow time for dialogue.
00:15:31.360
Questions on this topic?
00:15:39.520
I'd love to hear your thoughts.
00:15:52.000
As we reflect on this, it’s evident plugins play a significant role in jQuery's overall efficacy.
00:16:05.040
The metadata plugin is particularly useful, allowing for easy access to JSON data.
00:16:16.400
Live query has similarly transformed how we manage event bindings.
00:16:29.000
That flexibility is invaluable in a dynamic programming environment.
00:16:41.320
Continuing with our plugins, their role is pivotal for enhancing functionality.
00:16:55.160
Sharing these insights fortifies the collective knowledge among developers.
00:17:08.320
Ensure your foundation in these foundational tools is strong.
00:17:25.560
What do you think about integrating jQuery into our future projects?
00:17:39.320
Continue exploring innovative ways to use these libraries.
00:17:51.000
Let’s brainstorm tools and strategies that align with modern development practices.
00:18:05.760
Your experiences will significantly shape the outcomes of your projects.
00:18:21.000
As we wrap up, I want to reiterate the value of collaborative discovery.
00:18:38.360
The synthesis of our knowledge will only strengthen our implementations moving forward.
00:19:04.240
I appreciate everyone's engagement during this session.
00:19:19.200
Let’s keep the dialogue going!
00:19:28.600
Final thoughts or comments before we conclude this section?
00:19:40.320
I look forward to hearing your insights.
00:19:54.000
Remember to share your experiences with jQuery and its plugins.
00:20:05.760
You never know what might resonate with others!
00:20:20.160
With that, I’d like to thank everyone for attending.
00:20:30.560
A big thank you to Peep Code for hosting this session.
00:20:45.400
Let’s continue learning from one another!
