diff --git a/Introduction.asciidoc b/Introduction.asciidoc index edc18587..2845bb64 100644 --- a/Introduction.asciidoc +++ b/Introduction.asciidoc @@ -68,7 +68,7 @@ The short answer is yes. If you are planning to develop mainly for the mobile ma Remember that, even if you rely on a framework that claims to offer cross-browser compatibility, you will still need to test your application in the browsers you intend to support to ensure it functions as intended. The chances are that you may need to be fixing the framework's code here and there. Maintaining compatibility is a huge challenge for any framework's vendor, which in some cases can consist of just one developer. Spend some time working with the framework, and then work on your application code. If you can, submit your fixes back to the framework's code base - most of them are open source. -If you are planning to write pure JavaScript, add a tiny framework Modernizr (see Chapter 3) to your code base, which will detect if a certain feature is supported by the user's Web browser, and if not - provide an alternative solution. We like the analogy with TV sets. People with latest 3D HD TV sets and those who have 50-year old black and white televisions can watch the same movie even though the quality of the picture will be drastically different. +If you are planning to write pure JavaScript, add a tiny framework Modernizr (see Chapter 1) to your code base, which will detect if a certain feature is supported by the user's Web browser, and if not - provide an alternative solution. We like the analogy with TV sets. People with latest 3D HD TV sets and those who have 50-year old black and white televisions can watch the same movie even though the quality of the picture will be drastically different. === The Challenges diff --git a/appendix_c_ide.asciidoc b/appendix_c_ide.asciidoc new file mode 100644 index 00000000..f7b134f2 --- /dev/null +++ b/appendix_c_ide.asciidoc @@ -0,0 +1,52 @@ +[[appendix_c]] +[appendix] + += Appendix C. Running Code Samples and IDE + +The code samples used in this book are available on Github and are grouped by chapters. If a chapter has code samples look for the archive file with the respective name, for example chapter1.zip contains the code samples for Chapter 1. Technically, you don't have to use any Integrated Development Environment (IDE) to run code examples (except CDB example from Chapter 7) - just open the main file in a Web browser and off you go. But using an IDE will make you more productive. + + +== Which IDE to Use + +Selecting an IDE that supports JavaScript is a matter of your personal preference. Since there is no compilation stage and most of your debugging will be done using the Web browser tools, picking a text editor that supports syntax highlighting is all that most developers need. For example, there is an excellent text editor http://www.sublimetext.com[Sublime Text 2]. Among many programming languages this editor understands the keywords of HTML, CSS, and JavaScript, and it offers not only syntax highlighting, context sensitive help, and auto-complete too. + +If you are coming from the Java background, the chances are that you are familiar and comfortable with Eclipse IDE. In this case install the Eclipse plugin http://eclipse.org/vjet/[VJET] for JavaScript support. + +Oracle's IDE http://wiki.netbeans.org/HTML5[NetBeans 7.3] and above support HTML5 and JavaScript development. NetBeans includes JavaScript debugger that allows your code to connect to the Web browser, while debugging inside the IDE. + +If you prefer Microsoft technologies, they offer excellent JavaScript support in Visual Studio 2012. + +Appcelerator offers a free Eclipse-based http://aptana.com[Aptana Studio 3 IDE]. Aptana Studio comes with embedded Web Server so you can test your JavaScript code without the need to start any additional software. + +The authors of this book like and recommend using the http://www.jetbrains.com/webstorm[IDE WebStorm] from JetBrains. In addition to smart context sensitive help, auto-complete, and syntax highlighting it offers HTML5 templates, and the code coverage feature that identifies the code fragment that haven't been tested. + +== Running Code Samples in WebStorm IDE + +WebStorm IDE is pretty intuitive to use. If you've never used it before, refer to its http://www.jetbrains.com/webstorm/quickstart/[Quick Start Guide]. +When you first start WebStorm IDE, select the option _Open Directory_ in the Welcome screen. Then select the directory where you downloaded and unzipped the samples of a specific book chapter. For example, after opening code samples from Chapter 1 the WebStorm IDE will look as follows: + +[[FIGc-11]] +.Code Samples from Chapter 1 in WebStorm +image::images/fig_c_1.png[] + +Right-click on the HTML file you want to open (e.g. index.html) and select Open in Browser to test. If you want to serve your HTML5 project via a Web server, WebStorm IDE comes with a simple http://blog.jetbrains.com/webide/2013/03/built-in-server-in-webstorm-6/[internal Web server].You just need to open the URL http://localhost:63342 in your browser and append the name of your project. For example, if the WebStorm's project name is ssc, then http://localhost:63342/ssc will allow you to open the project in the Web browser. + +TIP: You can configure in WebStorm the port number of the internal Web Server via Preferences | Debugger | JavaScript | Built-in server port. + +== Using two IDEs: WebStorm and Eclipse + +Although we prefer using WebStorm for JavaScript development, but have to use Eclipse for some Java-related projects. In such cases we create a project in WebStorm pointing at the WebContent directory of your Eclipse project. This way we still enjoy a very smart context sensitive help offered by WebStorm, and all code modifications become immediately visible in the Eclipse project. + +To open the content of Eclipse WebContent directory in WebStorm select its menu File | Open Directory and point it at the WebContent directory of your Eclipse project. + +Mac users can also do it another way: + +1. Create a script to launch WebStorm from the command line. To do this start Storm and open its menu Tools | Create Launcher Script. Agree with defaults offered by the popup window shown in <> or select other directory located in the PATH system variable of your computer. This will create a script named wstorm there, and you'll be able to start WebStorm from a command line. ++ +[[FIG6-4-SSC]] +.Creating the launch script for WebStorm +image::images/fig_06_04_SSC.png[image] ++ +2. Open a Terminal window and switch to the directory WebStorm of your Eclipse project. Type there the command _wstorm ._, and it'll open the WebStorm with the entire content of your WebContent project. So all JavaScript development you'll be doing in WebStorm, and the Java-related coding in Eclipse while using the same WebContent directory. + +Such setup looks like an overkill, but we are talking about the enterprise development where you may jump through some hoops to create a convenient working environment for yourself. diff --git a/book.asciidoc b/book.asciidoc index 3ead6e03..cc985aac 100644 --- a/book.asciidoc +++ b/book.asciidoc @@ -34,4 +34,6 @@ include::ch14_hybrid.asciidoc[] include::ch1_advancedjs.asciidoc[] -include::ch2_html.asciidoc[] \ No newline at end of file +include::ch2_html.asciidoc[] + +include::appendix_c_ide.asciidoc[] diff --git a/ch1_advancedjs.asciidoc b/ch1_advancedjs.asciidoc index 5cb9a676..342fcfa7 100644 --- a/ch1_advancedjs.asciidoc +++ b/ch1_advancedjs.asciidoc @@ -69,20 +69,6 @@ The variables `address` and `isMarried` are visible only inside the function `ad The variable `isMarried` changes its type from `Boolean` to `String` during the execution of the above script, and JavaScript engine won't complain assuming that the programmer knows what she’s doing. So be ready for the run-time surprises and allocate a lot more time for testing than with programs written in compiled languages. -== Which IDE to Use - -Selecting an Integrated Development Environment (IDE) that supports JavaScript is a matter of your personal preference. Since there is no compilation stage and most of your debugging will be done using the Web browser tools, picking a text editor that supports syntax highlighting is all that most developers need. For example, there is an excellent commercial text editor http://www.sublimetext.com[Sublime Text 2]. Among many programming languages this editor understands the keywords of HTML, CSS, and JavaScript, and it offers not only syntax highlighting, context sensitive help, and auto-complete too. - -If you are coming from the Java background, the chances are that you are familiar with free and open sourced Eclipse IDE. In this case install the Eclipse plugin http://eclipse.org/vjet/[VJET]. - -Oracle's IDE http://wiki.netbeans.org/HTML5[NetBeans 7.3] and above support HTML5 and JavaScript development and includes JavaScript debugger that allows your code to connect to the Web browser, while debugging inside the IDE. If you prefer Microsoft technologies, they offer excellent JavaScript support in Visual Studio 2012. - -Appcelerator offers a free Eclipse-based http://aptana.com[Aptana Studio 3 IDE]. Aptana Studio comes with embedded Web Server so you can test your JavaScript code without the need to start any additional software. - -For the real world development we recommend using commercial http://www.jetbrains.com/webstorm[IDE WebStorm] from JetBrains. In addition to smart context sensitive help, auto-complete, and syntax -highlighting it offers HTML5 templates, and the code coverage feature that identifies the code fragment that haven't been tested. - - == Getting Familiar with Aptana IDE diff --git a/ch3_mockup.asciidoc b/ch3_mockup.asciidoc index 42402c38..41d4bb89 100644 --- a/ch3_mockup.asciidoc +++ b/ch3_mockup.asciidoc @@ -2,7 +2,7 @@ This book has three parts. In Part 1 we'll start building Web applications. We'll be building and re-building a sample application titled Save The Child. -IMPORTANT: We assume that the readers know how to write programs in JavaScript. If you are not familiar with this language, please study the materials from <> first. This appendix contains a fast paced introduction to JavaScript. +IMPORTANT: We assume that the readers know how to write programs in JavaScript. If you are not familiar with this language, please study the materials from <> first. You'll find a fast paced introduction to JavaScript there. In Chapter 1 we'll start working with a Web designer, will create a mockup, and start development in pure JavaScript. By the end of this chapter the first version of this application will be working using hard-coded data. @@ -14,11 +14,11 @@ After reading of this part you'll be ready to immerse into a more heavy-duty too == Mocking Up Save The Child Application -The time has come to start working on our Web application Save The Child. It's going to be a Web application that will support donations to The Children, embed a video player, integrate with Google maps, and eventually will feature an online auction. The goal is to gradually build all the functionality of the Web site while explaining each step of the way and giving you the reasons why we are building it the way we do. By the end of this chapter we'll have the Web design and the first prototype of the Save The Child. +We'll start working on our Web application Save The Child. It's going to be a Web application that will contain a form for donations to sick children, embed a video player, integrate with Google maps, will have charts, and more. The goal is to gradually build all the functionality of this Web application while explaining each step of the way and giving you the reasons why we are building it the way we do. By the end of this chapter we'll have the Web design and the first prototype of the Save The Child. The proliferation of mobile devices and Web applications require new skills for development of what was known as boring-looking enterprise applications. In the past, design of the user interface of most of the enterprise applications was done by developers to the best of their artistic abilities: a couple of buttons here, and a grid there on a gray background. The business users were happy cause they did not see any better. The application allowed to process business data – what else to wish for? Enterprise business users used to be happy with any UI as long as the application helped them to take care of their business. -But today's business users are spoiled by nice looking consumers applications, and more often than not new development starts with inviting a Web designer who should create a prototype of the future application. For example, we’ve seen some excellent (from the UI perspective) functional specifications for boring financial applications made by professional designers. Business users slowly but surely becoming more demanding in the area of the UI design solutions. The trend is clear: developer’s art does not cut it anymore. +But today's business users are spoiled by nice looking consumer-facing applications, and more often than not new development starts with inviting a Web designer who should create a prototype of the future application. For example, we’ve seen some excellent (from the UI perspective) functional specifications for boring financial applications made by professional designers. Business users slowly but surely becoming more demanding in the area of the UI design solutions. The trend is clear: developer’s art does not cut it anymore. In enterprise IT shops that work Web applications the Web design is usually done professional Web designer. The software developers are not overly familiar with the tools that Web designers are using. But to make this book useful even for a smaller shops that can't afford professional Web design, we'll illustrate the process of design and prototyping of the UI of a Web application. @@ -38,7 +38,7 @@ NOTE: The users of iOS and Android devices are used to the fact that they can fi Let's consider pointing devices. At the time of this writing, vast majority of the desktop users work with pixel-perfect mouse pointers or track pads. SmartPhone or tablet users work with fingers. One finger touch can cover a square with 100 pixels. The CNN site shows lots of news links located very close to each other on the screen. A finger may cover more than one link, and Android devices offer you a larger popup allowing you to select the link you really wanted to touch. Having the "Mobile first" state of mind doesn't mean that CNN would need to keep the larger distance between the links for all the users. But this means that they should foresee the issues or innovate using the features offered by modern mobile devices. -In Chapter 12 we'll discuss the _responsive design_ techniques that allow to create the UI for Web applications that automatically re-allocate the screen content based on the screen size of the user's device. Although this chapter is about the desktop version of the Save The Child Web application, its screen will consist of several rectangular areas that can be allocated differently (or even hidden) on smartphones or tablets. +In Chapter 10 we'll discuss the _Responsive Design_ techniques that allow to create the UI for Web applications that automatically re-allocate the screen content based on the screen size of the user's device. Although this chapter is about the desktop version of the Save The Child Web application, its screen will consist of several rectangular areas that can be allocated differently (or even hidden) on smartphones or tablets. NOTE: Before writing this book we've discussed how our application should look/work on mobile devices. But strictly speaking, since the work on multiple chapters was done in parralel, this was not a mobile first approach. @@ -68,7 +68,7 @@ When the prototype is done, it can be saved as an image and sent to the project During the first meeting Jerry talks to the project owner discussing the required functionality and then creates the UI to be implemented by Web developers. The artifacts produced by the designer vary depending on the qualifications of the designer. This can be a set of images representing different states of the UI with little _callouts_ explaining the navigation of the application. If the Web designer is familiar with HTML and CSS, developers may get a working prototype in the form of HTML and CSS files, and this is exactly what Jerry will create by the end of this chapter. -Our project owner said to Jerry: _"The Save The Child Web site should allow people to make donations to The Children. The users should be able to find these children by specifying a geographical area on the map. The site should be integrated with a payment system, include a video player and display statistics about the donors and recipients. The site should include an online auction with proceeds going to charity. We'll start working on the desktop version of this site first, but your future mockup should include three versions of the UI supporting desktops, tablets, and smartphones"_. +Our project owner said to Jerry: _"The Save The Child Web application should allow people to make donations to The Children. The users should be able to find these children by specifying a geographical area on the map. The application should include a video player and display statistics about the donors and recipients. The application should include an online auction with proceeds going to charity. We'll start working on the desktop version of this Web first, but your future mockup should include three versions of the UI supporting desktops, tablets, and smartphones"_. After the meeting Jerry launched Balsamiq and started to work. He decided that the main window will consist of four areas laid out vertically: @@ -121,7 +121,7 @@ We are lucky - Jerry knows HTML and CSS. He's ready to turn the still mockups in ==== Single Page Applications -A Single Page Web Application (SPA) is an architectural approach that doesn't require the user going through multiple pages to navigate the site. The user enters the URL in the browser, which brings the Web page that remains open on the screen until the user stop working with this application. The portion of the user's screen may change as the user navigate the application, the new data comes in using the AJAX techniques (see Chapter 4), or the new DOM elements will need to be created during the runtime, but the main page itself doesn't gets reloaded. This allows building so-called fat client applications that can remember its state. Besides, most likely your HTML5 application will use some JavaScript framework, which in SPA gets loaded only once when the home page gets created by the browser. +A Single Page Web Application (SPA) is an architectural approach that doesn't require the user going through multiple pages to navigate the site. The user enters the URL in the browser, which brings the Web page that remains open on the screen until the user stop working with this application. The portion of the user's screen may change as the user navigate the application, the new data comes in using the AJAX techniques (see Chapter 2), or the new DOM elements will need to be created during the runtime, but the main page itself doesn't gets reloaded. This allows building so-called fat client applications that can remember its state. Besides, most likely your HTML5 application will use some JavaScript framework, which in SPA gets loaded only once when the home page gets created by the browser. Have you ever seen a monitor of a trader working for a Wall Street firm? Actually, they usually have three or four large monitors, but let's just look at one of them. Imagine a busy screen with lots and lots constantly changing data grouped in dedicated areas of the window. This screen shows the constantly changing prices from financial markets, the trader can place orders to buy or sell products, and notifications on completed trades are also coming to the same screen. If this is would be a Web application it would live in the same Web page. No menus to open another windows. @@ -231,7 +231,7 @@ footer #temp-project-name-container { ---- The above CSS controls not only the styles of the page content, but also that sets the page layout. The `