Friday, June 28, 2013

baseapp: Other Grunt Goodies

baseapp provides all the boilerplate to get your JavaScript web application started off right, this Part 5.

  1. Intro to baseapp
  2. Client-Side Unit Tests
  3. Server-Side Unit Tests
  4. WebDriver Integration Tests
  5. Other Grunt Goodies
  6. Authentication
  7. Continuous Integration
  8. Administration
(or binge read them all on the baseapp wiki!)

baseapp provides some other grunt goodies as well beyond client-side unit tests, server-side unit tests, and integration tests! Let's take a look...

jshint

What JavaScript project would be complete with jslint/jshint? Here is the grunt configuration::

    jshint: {
        all: ['Gruntfile.js', 'public/javascripts/**/*.js', 'routes/**/*.js', 'spec/**/*.js', 'app.js']
        , options: {
            globals: {
                jQuery: true
            }
            , 'laxcomma': true
            , 'multistr': true
        }
    }

I like putting commas at the beginning of expressions and occasionally have been known to use multi-line strings - change these to suit you. Also I don't want jshint to complain about the 'jQuery' global variable. Finally I want to run jshint on my Gruntfile, all of my client-side JavaScript, server-side JavaScript, test files, and app.js. To use simply:

% grunt jshint

And jshint will complain loudly if it finds something it does not like. Note this task is the first task run as part of 'grunt test'.

Template Compilation

I like to pre-compile my dustjs-linkedin templates - who doesn't? This makes all of my templates available to be rendered by the client/browser as appropriate. To the grunt configuration!

    dustjs: {
        compile: {
            files: {
                "public/javascripts/templates.js": ["views/**/*.dust"]
            }
        }
    }

Not much here, this task will simply compile all the dust templates found in the 'view' tree and put them into 'templates.js', suitable for framing or loading into your HTML as you see fit:

    <script src="/vendor/dust-core-1.2.3.min.js"></script>
    <script src="/javascripts/templates.js"></script>

Note you need to of course also load up 'dust-core' to get the dust magic to actually fill out and render a template from templates.js. Here is a snippet from login.js that does this:

    dust.render('index', { user: data }, function(err, out){
        var newDoc = document.open("text/html", "replace");
        newDoc.write(out);
        newDoc.close();
    });

This is slightly different than a typical app as I am replacing the entire page once a user has successfully logged in - typically you just replace a piece of the page. Here I tell dust I want to render the 'index' template (compiled from 'index.dust') and am passing in some data to the template (the username). Dust asycnhonously returns me the redered text, which is HTML, and then I merrily replace the entire current document with it.

Here is the magic in index.dust that handles that:

{?user}
    <div>Howdy {user.username}</div>
    <button type="button" class="btn btn-large btn-primary" id="logout">Logout</button>
{:else} 
    {>login type="login"/}
    <button type="button" id="lB" class="btn btn-large btn-primary" data-toggle="modal" data-target="#loginForm">Login</button>
    {>login type="register"/}
    <button type="button" id="rB" class="btn btn-large btn-primary" data-toggle="modal" data-target="#registerForm">Register</button>
{/user}

This simply says if the 'user' property is defined show them their name and the logout button, otherwise show the login and register buttons.

Note further I include the 'login' template (compiled from login.dust) with a 'login' parameter. Called a 'partial' in the vernacular, this template creates both the 'login' and 'register' modals, since they are pretty much exactly the same it is templated out - that is what templates are for! The id names are different and some text is slightly different but the modals are 95% the same, hence the template.

SO running:

% grunt dustjs

Will compile all templates and create the 'templates.js' file in the right place. This task is run as part of 'grunt test'

I heartily suggest you become good friends with your favorite templating engine and use it extensively!

Static Code Analysis

Beyond the style and syntax-checker that is jshint, baseapp also includes plato for static code analysis. Plato outputs pretty HTML pages for application-level and file-level code statistics. Also especially nice is plato tracks the history of how our files change over time. Here is the config:

    plato: {
        dashr: {
          options : {
            jshint : false
          }
          , files: {
            'public/plato': ['public/javascripts/**/*.js', 'routes/**/*.js', 'spec/**/*.js', 'app.js'],
          }
        }
      }

This tells plato NOT to use jshint (we have already do that ourselves) and where all of our application files are - including our test files. Plato's output is dumped to 'public/plato' so load up the file 'public/plato/index.html' to see static code analysis in all of its glory. From there you can drill down to specific files if you see any red flags. Remember to keep it simple people!

This task is run as part of 'grunt test'

Total Coverage

This task aggragates coverage information from all sources: client-side unit tests, server-side unit tests, and webdriver/integration tests. If you (or your boss) wants to 'total total' number of all coverage from all tests this is it! To the configuration batman:

    total_coverage: {
        options: {
            coverageDir: './build/reports'
            , outputDir: 'public/coverage/total'
        }
    }

Unbeknownst to you we have been careful about putting all 'coverage.json' files (generated by istanbul) in under the single root 'options.coverageDir' for this very reason - to aggregate them all. This command will recursively look through this directory looking for files named 'coverage*.json' and will mash them all together to generate a single mongo report which is put in the 'options.outputDir' directory. Pointing your browser there and loading up 'lcov-report/index.html' will give you the full monty.

Istanbul can also output coverage information using the 'cobertura' format (vs. the 'lcov' format we have been using). This is useful for CI (and other) tools like Jenkins that understand that format. This task also output 'cobertura' format for the total coverage - which is also dumped into the 'options.outputDir' directory.

This task is run as part of 'grunt test'

The Whole Enchilada

So now we can finally see and understand everything that 'grunt test' does - take a look!

grunt.registerTask('test', [
    'jshint', 
    'jasmine',
    'jasmine_node_coverage',
    'dustjs', 
    'webdriver_coverage',
    'total_coverage',
    'plato'
]); 

Run jshint, run client-side unit tests, run server-side unit tests, compile our templates, run integration tests with code coverage, total up all of the coverage, and run plato. Whew that was fun!

76 comments:

  1. I was looking for some decent stuff on the subject and have had no luck so far. You just had a new big fan! ...

    360DigiTMG Data Science Courses

    ReplyDelete
  2. I just found this blog and hope it continues. Keep up the great work, it's hard to find good ones. I added to my favorites. Thank you.

    360DigiTMG Data Science Certification

    ReplyDelete
  3. Woohoo! It is an amazing and useful article. I really like. It's so good and so amazing. I am amazed. I hope you will continue to do your job in this way in the future as well.

    Business Analytics Course in Bangalore

    ReplyDelete
  4. Writing in style and getting good compliments on the article is hard enough, to be honest, but you did it so calmly and with such a great feeling and got the job done. This item is owned with style and I give it a nice compliment. Better!

    Data Analytics Course in Bangalore

    ReplyDelete
  5. I found Habit to be a transparent site, a social hub that is a conglomerate of buyers and sellers willing to offer digital advice online at a decent cost.

    Artificial Intelligence Course in Bangalore

    ReplyDelete
  6. Nice Information Your first-class knowledge of this great job can become a suitable foundation for these people. I did some research on the subject and found that almost everyone will agree with your blog.
    Cyber Security Course in Bangalore

    ReplyDelete
  7. Writing in style and getting good compliments on the article is hard enough, to be honest, but you did it so calmly and with such a great feeling and got the job done. This item is owned with style and I give it a nice compliment. Better!
    Cyber Security Training in Bangalore

    ReplyDelete
  8. Really nice and interesting blog information shared was valuable and enjoyed reading this one. Keep posting. Thanks for sharing.
    Data Science Training in Hyderabad

    ReplyDelete
  9. wonderful article contains lot of valuable information. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.
    This article resolved my all queries.good luck an best wishes to the team members.learn digital marketing use these following link
    Digital Marketing Course in Chennai

    ReplyDelete
  10. I have to search sites with relevant information ,This is a
    wonderful blog,These type of blog keeps the users interest in
    the website, i am impressed. thank you.
    Data Science Course in Bangalore

    ReplyDelete
  11. I have to search sites with relevant information ,This is a
    wonderful blog,These type of blog keeps the users interest in
    the website, i am impressed. thank you.
    Data Science Training in Bangalore

    ReplyDelete
  12. Very nice article. I enjoyed reading your post. very nice share. I want to twit this to my followers. Thanks
    พวงหรีด
    รับทำ seo
    wm casino
    poker online
    โควิด

    ReplyDelete
  13. Such a very useful blog. Very Interesting to read this blog. I would like to thank you for the efforts you had made for writing this awesome blog. Great work.
    คลิปโป๊
    คลิปxxx
    คลิปโป๊ญี่ปุ่น
    คลิปโป้ไทย
    เรียนภาษาอังกฤษ
    kardinal stick

    ReplyDelete
  14. Watch movies online sa-movie.com, watch new movies, series Netflix HD 4K หนังฝรั่ง, watch free movies on your mobile phone, Tablet, watch movies on the web.

    SEE4K Watch movies, watch movies, free series, load without interruption, sharp images in HD FullHD 4k, ดูหนังชนโรง all matters, all tastes, see anywhere, anytime, on mobile phones, tablets, computers.

    GangManga read manga, read manga, read manga online for free, fast loading, clear images in HD quality, อ่านมังงะ all titles, anywhere, anytime, on mobile, tablet, computer.

    Watch live football ดูบอลออนไลน์, watch football online, link to watch live football, watch football for free.

    ReplyDelete
  15. SamudraBet Situs Judi Online Terbaik, Terpercaya dan Terbesar di Indonesia. Menyediakan permainan :

    Judi bola terbaik

    Judi slot online terpercaya

    Poker online terbaru

    Live casino online

    Judi sabung ayam

    ReplyDelete
  16. Typically, CBD crystals contain between 98 and 99 percent isolated CBD. Similar products were created with the primary psychoactive in the CBD Cannabis plant, tetrahydrocannabinol (THC).

    ReplyDelete
  17. The largest, including thousands more every day With games that start every second, lovePoker is the only place that collects
    poker online games from many, be it Upoker, Pppoker, PokerBros, Pokerstars, Sharkscope, Siampoker, Dafabet, IDN Poker, or well known Thai people

    ReplyDelete
  18. it is not the most popular on this list, but fans do love its benefits ดูบอลฟรี . One of these is that no sign up is required, but you can sign up for free to get some convenient options. For instance, it provides intelligent content recommendations and a calendar for you to set up reminders. That way, you never miss your favorite live content. If you do miss it, though, you can always pull it up on Duball24hrs.com recordings.

    ReplyDelete
  19. เราคือผู้นำด้านเกมพนันออนไลน์ Major168 เราคือผู้ให้บริการ คาสิโนออนไลน์ ที่ได้รับรองว่าดีที่สุดในประเทศไทย มีค่ายเกมส์ให้เล่นมากมาย Sagaming, Sexy bacarat, Dreamgame, Ebet, Wm casino, Vivo gaming ไม่ผ่านเอเย่นต์ ระบบปลอดภัยมีทีมงานดูแลตลอด 24ชม.

    SAGAME88 แหล่งรวมเกมส์พนันออนไลน์ คาสิโนสด บาคาร่า กำถั่ว คาสิโนออนไลน์ ไฮโล รูเล็ต รับเครดิตฟรีเล่นได้ทุกเกมส์ โบนัสสมาชิกใหม่เพียบ พร้อมระบบฝากถอนออโต้ 10วิ เรามีทุกค่ายเกมส์ให้คุณเลือกเดิมพัน SA Game Sexy bacarat Dreamgame WM Casino VIVO Gaming Ebet เล่นได้ทุกเกมส์

    Our website ufabet provides betting services in the system of Auto Deposit-Withdrawal. Our members are not only in Thailand. Online football betting UEFA Bet market And this makes a guarantee that Ufabet168 is another reliable football betting website

    ufa through the website UFABET1688 a web gambling online , one that integrated all the bets from online casinos , online casino , online , and also have a game a lot more to be chosen to play such games.

    ReplyDelete
  20. Happy to chat on your blog, I feel like I can't wait to read more reliable posts and think we all want to thank many blog posts to share with us.

    Data Science Training in Bangalore

    ReplyDelete
  21. Really wonderful blog completely enjoyed reading and learning to gain vast knowledge. Eventually, this blog helps in developing certain skills which in turn helpful in implementing those skills. Thanking the blogger for delivering such beautiful content and keep posting the contents in the upcoming days.

    Digital Marketing Training in Bangalore

    ReplyDelete
  22. Highly appreciable regarding the uniqueness of the content. This perhaps makes the readers feel excited to get stick to the subject. Certainly, the learners would thank the blogger to come up with innovative content which keeps the readers to be up to date to stand by the competition. Once again nice blog keep it up and keep sharing the content as always.

    Cyber Security Course

    ReplyDelete
  23. Truly incredible blog found to be very impressive due to which the learners who go through it will try to explore themselves with the content to develop the skills to an extreme level. Eventually, thanking the blogger to come up with such phenomenal content. Hope you arrive with similar content in the future as well.

    Machine Learning Course in Bangalore

    ReplyDelete
  24. Because our ufabet website system is an automatic deposit system. Therefore having to bother customers who transfer money to Do not save your account number as a favorite. Always fill in to transfer by yourself. Because the system may change the deposit account It is very important that customers view the transfer balance every time.

    ReplyDelete
  25. This is the best blog annualeventpost I ever see. Thanks for sharing information with us.

    ReplyDelete
  26. This is an excellent post I seen thanks to share it. It is really what I wanted to see hope in future you will continue for sharing such a excellent post.
    digital marketing courses in hyderabad with placement

    ReplyDelete
  27. Thanks for posting the best information and the blog is very important.artificial intelligence course in hyderabad

    ReplyDelete
  28. Very professionally written blog. Regards to your hard work and effort. Looking forward to learn a lot more from you. Do share more.
    Reactjs Training in Chennai |
    Best Reactjs Training Institute in Chennai |
    Reactjs course in Chennai |

    ReplyDelete
  29. Hey, here you will get the best pad nursing assignment help service with highly experienced professionals who will give you plagiarism free study material. Visit our website to know more.

    ReplyDelete
  30. Trying to get a printout in black but can’t. HP printer not printing black is one of the most common issues experienced by HP users. The reasons behind this error are many but you should start by checking your black ink cartridge.

    ReplyDelete
  31. The post is quite informative as I could derive a lot on the topic by reading through it. At myassignmenthelp Now, We Offer Pocket-Friendly assignment writing services. Students trust our assignment help in Australia. To get genuine assignments within deadlines, Hire Us Today!

    ReplyDelete
  32. If you are among the students who need the assignment help in the Australia, then you can take help from our Do my assignment online services. We have the team of the professional writers who can provide you online assistance so that you can complete your work before deadlines. Isn’t it a great idea to take help from allassignmenthelp? If yes, then we would provide your work to an expert writer who would be making it possible for you to submit your assignments on time.

    ReplyDelete
  33. Here's an example: Let's say you use your CareCredit card to pay for a $3,000 dental bill. You qualified for a 24-month 0% annual percentage rate promotional period. You do your best to pay it off, but there's still $1,000 left after two years.
    fishyfacts4u.com
    fishyfacts4u.com
    fishyfacts4u.com
    fishyfacts4u.com
    fishyfacts4u.com
    fishyfacts4u.com
    fishyfacts4u.com
    fishyfacts4u.com
    fishyfacts4u.com
    fishyfacts4u.com

    ReplyDelete
  34. Jimdo is mainly aimed at those that mainly want to build ecommerce stores and their main idea is the ease of every step of the way. Right now, there are around 20 million Jimdo sites with around 200,000 of them being online shops.
    emagazinehub.com
    emagazinehub.com
    emagazinehub.com
    emagazinehub.com
    emagazinehub.com
    emagazinehub.com
    emagazinehub.com
    emagazinehub.com
    emagazinehub.com
    emagazinehub.com

    ReplyDelete
  35. Depending on your banking relationship with SunTrust, you could receive between 10% and 50% more rewards when you redeem your rewards cash back into a SunTrust checking, savings or money market account. Here’s how it breaks down:

    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com

    ReplyDelete
  36. "Some of our clients do get letters from the IRS stationary and they panic," Balsam says. "Take a deep breath. Don't panic. Consult with someone like me or the CPA who prepared the return. Most of the time it's fairly innocent and easy to rectify, and no one's going to send you to jail."

    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com

    ReplyDelete
  37. “Thank you so much for sharing all this wonderful info with the how-to's!!!! It is so appreciated!!!” Enjoyed reading your post keep sharing such an nice post will come back to read more. write essays for students

    ReplyDelete
  38. Fantastic article I ought to say and thanks to the info. Instruction is absolutely a sticky topic. But remains one of the top issues of the time. I love your article and look forward to more.
    Data Science Course in Bangalore

    ReplyDelete
  39. Are you contemplating to take help from an Essay Writing Service? Are you concerned about finding the right service provider to delegate your essay writing? Then the answer to all your queries lies with the meticulous services from qqiassignments.com.Our experts in writing essays are equipped with the proper knowledge of formatting styles. So they always follow the appropriate format maintained by your respective institutions. for more information visit website-https://www.qqiassignments.com/essay-writing-services/

    ReplyDelete
  40. Then, states may make adjustments to the federal AGI with their own credits, deductions or add backs, which are items that are deducted on federal returns but taxable by a state. For instance, while some state and local taxes may be deductible on federal returns, states may require them to be added back for purposes of calculating state income taxes.
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com

    ReplyDelete
  41. I am a new user of this site, so here I saw several articles and posts published on this site, I am more interested in some of them, hope you will provide more information on these topics in your next articles.

    Business Analytics Course

    ReplyDelete
  42. Thank you quite much for discussing this type of helpful informative article. Will certainly stored and reevaluate your Website.
    Data Analytics Course in Bangalore

    ReplyDelete
  43. It's like you understand the topic well, but forgot to include your readers. Maybe you should think about it from several angles.

    Digital Marketing Course in Bangalore

    ReplyDelete
  44. This is a really good article. I recently discovered your blog and wanted to express my gratitude for taking the time to go through your postings. After all, I'll be subscribing to your feed and hoping to hear from you soon! To know about Hire Professional Essay Writers, visit at https://www.allassignmenthelp.co.uk/hire-essay-writers-online.html

    ReplyDelete
  45. Learning and education are essential components of our life. People study to get a good and well-paid job. Not everyone is happy to take online classes. Some parents force their children to learn this manner along with regular studies. Online classes can become a nightmare for someone who has already completed sufficient assignments. Students need to take my online class for me very regularly. Even a student can have numerous online programs that are quite tough. You should not only attend these courses but you should also finish your homework too.

    ReplyDelete

  46. How do I fix my cash app transfer failed for my protection?

    How do I fix my cash app transfer failed for my protection there are multiple ways to solve a cash app transfer failed issue. But it would be great if you can find out the exact cause of these problems. Only a cash app representative will be able to tell you the exact cause of this error. So we suggest you contact the support team quickly for the best assistance.

    ReplyDelete
  47. Robinhood customer service-receive solution service immediately:

    Robinhood customers may initiate to receive the solution services immediately by connecting to the Robinhood customer service team. They are punctual at offering direction and alternative solution factors to eradicate the tech problems with no hassles, their main motive is to keep their customer happy and enable them to utilize the Robinhood platform for their benefits in all aspects. The real-time conversation with the service team can ensure an instant solution.

    ReplyDelete
  48. This field is very much profitable and if you want to secure your future, you should learn this skill and enjoy a good life. Assignment writing service.

    ReplyDelete
  49. Very wonderful informative article. I appreciated looking at your article. Very wonderful reveal. I would like to twit this on my followers. Many thanks! .
    Data Analytics training in Bangalore

    ReplyDelete
  50. I am glad to discover this page. I have to thank you for the time I spent on this especially great reading !! I really liked each part and also bookmarked you for new information on your site.
    Data Science Course Syllabus

    ReplyDelete
  51. Though there are a lot of reasons why students prefer to hire assignment writing service but one of the major reason is lack of time. Many times they don’t have enough time to write solutions on a topic that they have not mastered. This lack of time can also be a result of various activities. Some students are just procrastinators and they fail to balance everything. In some cases, students face genuine occupancies and they lose time. Be it any case, you can always hire a homework helper and keep things sorted. Remember, it is better to take help rather losing your desired grades.

    ReplyDelete
  52. Do you have some technical problems with your printer? Are you not able to print remotely or directly from your smartphone? Don’t worry these and many other similar issues can be easily resolved without taking your printer to the dealer.HP Pinter support center

    ReplyDelete
  53. Nice to be seeing your site once again, it's been weeks for me. This article which ive been waited for so long. I need this guide to complete my mission inside the school, and it's same issue together along with your essay. Thanks, pleasant share.
    Data Science training in Bangalore

    ReplyDelete
  54. Amazing website, Love it. Great work done. Nice website. Love it. This is really nice. essay help ireland

    ReplyDelete
  55. I want to say thanks to you. I have bookmarked your site for future updates.
    digital marketing courses in hyderabad with placement

    ReplyDelete
  56. I was just examining through the web looking for certain information and ran over your blog.It shows how well you understand this subject. Bookmarked this page, will return for extra. data science course in vadodara

    ReplyDelete
  57. Our onlineassignment help UK
    is available around the world and offers fully online and offline transparency and communication, so you know you trust the right place. We give you the best assignment help online, from fresher’s to senior-year students. We are committed to make your life easier and allow you to breathe in your home.

    ReplyDelete
  58. Are you struggling with those English report writing? Find English report writing service difficult? Do not worry we have got your back in every field and subject.We will provide you the best do my math homework uk
    English is a subject you cannot deny or run away from till your lifetime. If you have a strong desire to pursue a good and high degree in it then you should command this.

    ReplyDelete
  59. buy dissertation is a test of your ability to do independent research. You have a lot of autonomy when writing your buy dissertation you develop your own ideas, do your own research, and write and structure the text yourself. This means that whether you continue in the academic field or not is an important preparation for your future: it teaches you to manage your own time, generate original ideas and work independently.

    ReplyDelete
  60. Very wonderful informative article. I appreciated looking at your article. Very wonderful reveal. I would like to twit this on my followers. Many thanks! .
    Data Analytics training in Bangalore

    ReplyDelete
  61. ngobrol games I checked this blog regularly and I'm really pleased! Especially the final section I care about such information is quite useful. For a very long time I have been looking for this precise information. Thanks and happiness.

    ReplyDelete