{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/blog/2013/07/27/using-angularjs-stop-using-jquery-as-a-crutch",
    "result": {"data":{"site":{"siteMetadata":{"title":"your friend Joel's digital garden","description":"Articles and notes from a collaborator at egghead.io. Musings on software, business, and life from a skilled virtual assistant.","author":{"name":"Joel Hooks"},"keywords":["Video Blogger"]}},"mdx":{"excerpt":"Have you ever heard (or said!) this: \"Directives? That's where the jQuery goes.\" I definitely have. In an effort to better understand\n @joshdmiller 's excellent\n ng-boilerplate , I\nwanted to understand its dependency on Boostrap. More…","fields":{"github":"https://github.com/joelhooks/joelhooks-com/tree/master/content/legacy_blog/2013-07-29-using-angularjs-stop-using-jquery-as-a-crutch.markdown"},"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"layout\": \"post\",\n  \"title\": \"Using AngularJS? Stop using jQuery as a crutch.\",\n  \"date\": \"2013-07-27T00:00:00.000Z\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Have you ever heard (or said!) this:\"), mdx(\"p\", null, \"\\\"Directives? That's where the jQuery goes.\\\"\"), mdx(\"p\", null, \"I definitely have.\"), mdx(\"p\", null, \"In an effort to better understand\\n\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://twitter.com/joshdmiller\"\n  }, \"@joshdmiller\"), \"'s excellent\\n\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/joshdmiller/ng-boilerplate\"\n  }, \"ng-boilerplate\"), \", I\\nwanted to understand its dependency on Boostrap. More specifically, I wanted to\\nsee if I could swap out Twitter Bootstrap for Zurb Foundation. Bootstrap is\\ngreat, but I really love using SCSS.\"), mdx(\"h2\", null, \"Down the rabit hole...\"), mdx(\"p\", null, \"Up until this point, I've completely ignored\\n\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/angular-ui/bootstrap\"\n  }, \"angular-ui-bootstrap\"), \", which is a wrapper for\\nTwitter Bootstrap that you can use with AngularJS. It hasn't been on my radar,\\nsimply because I prefer Foundation. That was a mistake. This wonderful little\\nlibrary is amazing. On many levels, it expresses the power and flexibility of\\nAngularJS like nothing else I have seen.\"), mdx(\"p\", null, \"From the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/angular-ui/bootstrap#native-lightweight-directives\"\n  }, \"angular-ui-bootstrap\\nREADME\"), \":\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"We are aiming at providing a set of AngularJS directives based on Twitter\\nBootstrap's markup and CSS. The goal is to provide native AngularJS directives\\nwithout any dependency on jQuery or Bootstrap's JavaScript. It is often better\\nto rewrite an existing JavaScript code and create a new, pure AngularJS\\ndirective. Most of the time the resulting directive is smaller as compared to\\nthe orginal JavaScript code size and better integrated into the AngularJS\\necosystem.\")), mdx(\"p\", null, \"This struck me.\"), mdx(\"p\", null, \"The only dependency that ui-bootstrap has on Twitter Bootstrap is the CSS style\\nsheets. All of the widgets work because they have been implemented with\\nAngularJS directives.\"), mdx(\"p\", null, \"I was reading through some posts on the Google groups in my earlier quest to\\nfind out how to integrate Foundation into ng-boilerplate (I'm stubborn!) and was\\nvery interested in what Josh had to say:\"), mdx(\"blockquote\", null, \"You can wire up some callbacks and $apply calls to make a jQuery plugin work but as Pawel said, rewriting something in AngularJS often takes less work. jQuery doesn't have any of the binding or scope magic. When we cut out all of the jQuery code that makes up for that, we're often left with very little code. And when we put those few lines of code in an AngularJS directive, everything will work out of the box. So in balancing levels of effort, rewriting makes sense more often than it doesn't.\", mdx(\"cite\", null, mdx(\"br\", null), \"- \", mdx(\"a\", {\n    href: \"https://groups.google.com/d/msg/angular/Htkzt7Fsaog/TeFm5l4snTwJ\"\n  }, \"Josh David Miller\"))), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Mind blown.\")), mdx(\"p\", null, \"In the post quoted above Josh also links to his \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-emberjsor-other-client-mvc-framework-if-i-have-a/15012542#15012542\"\n  }, \"excellent Stack\\nOverflow\"), \"\\npost that expands on this viewpoint. You may have seen this already, but if you\\nhaven't, go take 10 minutes to read through it.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Don't even use jQuery. Don't even include it. It will hold you back. And when\\nyou come to a problem that you think you know how to solve in jQuery already,\\nbefore you reach for the $, try to think about how to do it within the confines\\nthe AngularJS. If you don't know, ask! 19 times out of 20, the best way to do\\nit doesn't need jQuery and to try to solve it with jQuery results in more work\\nfor you.\")), mdx(\"p\", null, \"Bold words.\"), mdx(\"p\", null, \"I'm convinced.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"jQuery is a crutch if you are writing AngularJS applications.\")), mdx(\"p\", null, \"If you're starting an AngularJS app, take a good look at\\nng-boilerplate. Then take a look at \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/angular-ui/bootstrap/tree/master/src\"\n  }, \"ui-bootstrap's directives\"), \". They are a living\\nexample of how you can do \\\"jQuery things\\\" with a fraction of the code, and build\\nan app that is easier to maintain, way more testable, and generally nicer to\\nwork with.\"), mdx(\"p\", null, \"P.S. If you were wondering, it is theoretically possible to simply use the\\nFoundation CSS with ui-bootstrap. There is some work being done in that regard,\\nand I'm looking forward to pitching in on it. I don't know that it will ever get\\nto \\\"drop in replacement\\\" status, but from the discussions I've read the future\\nlooks promising on this front.\"), mdx(\"p\", null, \"P.P.S This isn't a critique of jQuery. I think jQuery is awesome and has moved\\nthe web forward considerably. Even within Angular, they use what is called\\n\\\"jqLite\\\" to give the core essentials of jQuery's functionality. In that sense,\\njust using Angular in the Angular way uses jQuery, but a minimal subset of it.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Using AngularJS? Stop using jQuery as a crutch.","date":"July 27, 2013","banner":null,"slug":null,"keywords":null}}},"pageContext":{"id":"f5ef54ec-a963-578e-b926-4ff1ab6100df","prev":{"id":"5059a58c-5921-5c76-bdeb-745112675dee","parent":{"name":"2013-08-03-learn-angularjs-in-a-weekend","sourceInstanceName":"legacy"},"excerpt":"AngularJS has a reputation for a steep learning curve. It's definitely complex, but follows the 80/20 rule.  20% of the features are what you will use 80% of the time . If you are new to AngularJS and have a weekend to study, there are some very high…","fields":{"title":"Learn AngularJS this Weekend","slug":"blog/2013/08/03/learn-angularjs-in-a-weekend","date":"2013-08-03T00:00:00.000Z"}},"next":{"id":"d8b08354-1165-5dda-8006-e759a1c70551","parent":{"name":"2013-07-22-the-basics-of-using-ui-router-with-angularjs","sourceInstanceName":"legacy"},"excerpt":"URL routing is a popular approach to matching the contents of a URL to specific\nfunctionality within a web application. URL routes programatically present\nspecific content to users based on the URL that they are visiting. It is a\npopular approach…","fields":{"title":"The basics of using ui-router with AngularJS","slug":"blog/2013/07/22/the-basics-of-using-ui-router-with-angularjs","date":"2013-07-22T00:00:00.000Z"}}}},
    "staticQueryHashes": ["1045846374"]}