├── .gitignore ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── elmish.md ├── examples ├── counter-basic-impure │ └── index.html ├── counter-basic-test │ ├── counter.js │ ├── index.html │ └── test.js ├── counter-basic │ └── index.html ├── counter-reset-keyboard │ ├── counter.js │ ├── index.html │ └── test.js ├── counter-reset │ ├── counter.js │ ├── index.html │ └── test.js ├── multiple-counters-instances │ └── index.html ├── multiple-counters │ ├── counter.js │ ├── index.html │ └── test.js ├── style.css └── todo-list │ ├── elmish.js │ ├── favicon.ico │ ├── index.html │ ├── test.js │ ├── todo-app.js │ ├── todo.html │ ├── todomvc-app.css │ └── todomvc-common-base.css ├── multiple-counters.md ├── package.json ├── test ├── counter-reset.test.js ├── elmish.test.js └── todo-app.test.js └── todo-list.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | .DS_Store 39 | package-lock.json 40 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - node 4 | after_success: 5 | - bash <(curl -s https://codecov.io/bash) 6 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | _**Please read** our_ [**contribution guide**](https://github.com/dwyl/contributing) (_thank you_!) 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | {description} 294 | Copyright (C) {year} {fullname} 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Learn Elm Architecture in _Plain_ JavaScript 2 | 3 | Learn how to build web applications using 4 | the Elm ("Model Update View") Architecture in "_plain_" JavaScript. 5 | 6 | [![Build Status](https://travis-ci.org/dwyl/learn-elm-architecture-in-javascript.svg?branch=master)](https://travis-ci.org/dwyl/learn-elm-architecture-in-javascript) 7 | [![test coverage](https://codecov.io/gh/dwyl/learn-elm-architecture-in-javascript/branch/master/graph/badge.svg)](https://codecov.io/gh/dwyl/learn-elm-architecture-in-javascript) 8 | [![dependencies Status](https://david-dm.org/dwyl/learn-elm-architecture-in-javascript/status.svg)](https://david-dm.org/dwyl/learn-elm-architecture-in-javascript) 9 | [![devDependencies Status](https://david-dm.org/dwyl/learn-elm-architecture-in-javascript/dev-status.svg)](https://david-dm.org/dwyl/learn-elm-architecture-in-javascript?type=dev) 10 | [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues) 11 | [![HitCount](http://hits.dwyl.io/dwyl/learn-elm-architecture-in-javascript.svg)](http://hits.dwyl.io/dwyl/learn-elm-architecture-in-javascript) 12 | 13 | 14 | > We think Elm is the _future_ of Front End Web Development
15 | for all the _reasons_ described in: 16 | [github.com/dwyl/**learn-elm#why**](https://github.com/dwyl/learn-elm#why)
17 | _However_ we _acknowledge_ that Elm is "_**not everyone's taste**_"!
18 | 19 | > What [_many_](https://youtu.be/VNGFep6rncY) 20 | Front-End Developers _are_ learning/using is 21 | [React.js](https://github.com/dwyl/learn-react).
22 | _Most_ new _React.js_ apps are built using 23 | [Redux](https://github.com/dwyl/learn-redux) which "_takes cues from_"
24 | (_takes **all** it's **best ideas/features** from_) Elm:
25 | ![redux-borrows-elm](https://cloud.githubusercontent.com/assets/194400/25845941/c7a9ce78-34a7-11e7-91fb-a65f99ce0046.png) 26 | 27 | > Therefore, by learning the Elm Architecture, 28 | you will **_intrinsically_ understand Redux**
29 | which will help you learn/develop 30 | [React](https://github.com/dwyl/learn-react/issues/18) 31 | apps.
32 | 33 | > This ***step-by-step tutorial*** is a _gentle_ introduction to 34 | the Elm Architecture,
35 | for people who write JavaScript and want 36 | a _**functional**, **elegant** and **fast**_
37 | way of organizing their JavaScript code _without_ 38 | having the learning curve
39 | of a completely new (_functional_) programming language! 40 | 41 | 42 | ## _Why?_ 43 | 44 | ![simple-life](https://cloud.githubusercontent.com/assets/194400/25773897/ea0c11fa-327d-11e7-86e0-7d8721c2d7ea.png) 45 | 46 | _Organizing_ `code` in a Web (_or Mobile_) Application 47 | is _really easy_ to ***over-complicate***,
48 | _especially_ when you are just starting out and there 49 | are _dozens_ of competing ideas 50 | all _claiming_ to be the "***right way***"... 51 | 52 | When we encounter this type of "_what is the **right way**_?" 53 | question,
54 | we always follow 55 | [***Occam's Razor***](https://en.wikipedia.org/wiki/Occam%27s_razor) 56 | and _ask_: 57 | what is the ***simplest way***?
58 | In the case of web application organization, 59 | the ***answer*** is: 60 | the "**Elm _Architecture_**". 61 | 62 | 63 | When compared to _other_ ways of organizing your code, 64 | "Model Update View" (MUV) has the following benefits: 65 | + Easier to _understand_ what is going on in more advanced apps because there is no complex logic, 66 | only one basic principal 67 | and the "_flow_" is _always_ the same. 68 | + ***Uni-directional data flow*** means the "state" 69 | of the app is always _predictable_; 70 | given a specific starting "state" and sequence of update actions, 71 | the output/end state will _always_ be the same. This makes testing/testability 72 | very easy! 73 | + There's **no** "***middle man***" to complicate things 74 | (_the way there is in other application architectures 75 | such as 76 | [Model-view-Presenter](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter) or "Model-View-ViewModel" (MVVM) which is "overkill" for most apps_). 77 | 78 | > _**Note**: **don't panic** if any of the terms above are strange 79 | or even confusing to you right now. 80 | > Our **quest** is to put all the concepts into **context**. 81 | > And if you get "**stuck**" at any point, we are here to help! 82 | > Simply **open a question** on GitHub:_ 83 | [github.com/dwyl/**learn-elm-architecture**-in-javascript/**issues**](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues) 84 | 85 | 86 | ## _Who? (Should I Read/Learn This...?)_ 87 | 88 | [![everybodys-gotta-learn-sometime](https://cloud.githubusercontent.com/assets/194400/25806590/a1619644-33fb-11e7-8b84-1a21be188fb7.png)](https://www.youtube.com/results?q=The+Korgis+-+Everybody%27s+Gotta+Learn+Sometime) 89 | 90 | Anyone who knows a _little_ bit of JavaScript 91 | and wants to learn how to organize/structure
92 | their code/app in a _sane_, predictable and testable way. 93 | 94 | ### _Prerequisites_? 95 | 96 | [![all-you-need-is-less](https://cloud.githubusercontent.com/assets/194400/25772135/a4230490-325b-11e7-9f12-da19fa4eb5e9.png)](https://www.ted.com/talks/graham_hill_less_stuff_more_happiness) 97 | 98 | + **_Basic_ JavaScript Knowledge**. 99 | see: [github.com/dwyl/**Javascript**-the-**Good-Parts**-notes](https://github.com/iteles/Javascript-the-Good-Parts-notes) 100 | + _Basic_ Understanding of **TDD**. If you are _completely_ new to TDD, 101 | please see: [github.com/dwyl/**learn-tdd**](https://github.com/dwyl/learn-tdd) 102 | + A computer with a Web Browser. 103 | + **30 minutes**. 104 | 105 | > No other knowledge is assumed or implied. 106 | If you have **_any_ questions**, ***please ask***:
107 | [github.com/dwyl/**learn-elm-architecture**-in-javascript/**issues**](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues) 108 | 109 | 110 | ## _What?_ 111 | 112 | [![image](https://cloud.githubusercontent.com/assets/194400/25772120/3fa2492c-325b-11e7-9aee-90b059360c14.png)](https://youtu.be/yYCmhHFhopA?t=4s) 113 | 114 | ### A _Complete Beginner's_ Guide to "MUV" 115 | 116 | Start with a few definitions: 117 | 118 | + **Model** - or "data model" is the place where all data is stored; 119 | often referred to as the application's `state`. 120 | + **Update** - how the app handles `actions` performed 121 | by people and `update`s the `state`, 122 | usually organised as a `switch` with various `case` statements corresponding 123 | to the different "_actions_" the user can take in your App. 124 | + **View** - what people using the app can _see_; 125 | a way to `view` the Model (in the case of the first tutorial below, 126 | the counter) as `HTML` rendered in a web browser. 127 | 128 | ![elm-muv-architecture-diagram](https://cloud.githubusercontent.com/assets/194400/25773775/b6a4b850-327b-11e7-9857-79b6972b49c3.png) 129 | 130 |
131 | If you're not into flow diagrams, 132 | here is a much more "user friendly" explanation 133 | of The Elm Architecture ("TEA"):
134 | 135 |
136 | 137 | ![elm-architecture-puppet-show](https://user-images.githubusercontent.com/194400/41206474-62d1a6a4-6cfc-11e8-8029-e27b7aa7f069.jpg) 138 | 139 |
140 | 141 | [**Kolja Wilcke**'s](https://twitter.com/01k/status/986528602635358208?s=20) 142 | ["View Theater" diagram](https://github.com/w0rm/creating-a-fun-game-with-elm/blob/001baf05b3879d12c0ff70075e9d25e8cc7c4656/assets/the-elm-architecture1.jpg) 143 | Creative Commons License 144 | [Attribution 4.0 International (CC BY 4.0)](https://twitter.com/01k/status/986528602635358208?s=20) 145 | 146 |
147 | 148 |
149 | 150 | In the "View Theatre" diagram, the: 151 | + **`model`** is the ensamble of characters (_or "**puppets**"_) 152 | + **`update`** is the function that transforms (_"changes"_) the `model` 153 | (_the "**puppeteer**"_). 154 | + **`view`** what the audience sees through "view port" (_stage_). 155 | 156 | 157 | > If this diagram is not clear (_yet_), again, don't panic, 158 | it will all be clarified when you start seeing it in _action_ (_below_)! 159 | 160 | 161 | ## _How?_ 162 | 163 | ### 1. Clone this Repository 164 | 165 | ```sh 166 | git clone https://github.com/dwyl/learn-elm-architecture-in-javascript.git && cd learn-elm-architecture-in-javascript 167 | ``` 168 | 169 | ### 2. Open Example `.html` file in Web Browser 170 | 171 | > **Tip**: if you have **node.js** installed, simply run **`npm install`**! 172 | > That will install **`live-server`** which will _automatically_ refresh 173 | your browser window when you make changes to the code! 174 | (_makes developing faster!_) 175 | 176 | When you open `examples/counter-basic/index.html` you should see: 177 | 178 | ![elm-architecture-counter](https://cloud.githubusercontent.com/assets/194400/25780607/d2251eac-3321-11e7-8e65-9abbfa204fb3.gif) 179 | 180 | Try clicking on the buttons to increase/decrease the counter. 181 | 182 | ### 3. Edit Some Code 183 | 184 | In your Text Editor of choice, 185 | edit the _initial value_ of the model 186 | (_e.g: change the initial value from 0 to 9_). 187 | Don't forget to save the file! 188 | 189 | ![elm-architecture-code-update](https://user-images.githubusercontent.com/4185328/46260332-6f107980-c4dc-11e8-98c8-e1775453dfac.gif) 190 | 191 | ### 4. Refresh the Web Browser 192 | 193 | When you refresh the your Web Browser you will see 194 | that the "_initial state_" is now **9** 195 | (or whichever number you changed the initial value to): 196 | 197 | ![update-initial-model-to-9](https://cloud.githubusercontent.com/assets/194400/25780667/c84d0bf4-3323-11e7-929d-2019f5face2c.png) 198 | 199 | You have just seen how easy it is to set the "_initial state_" 200 | in an App built with the Elm Architecture.
201 | 202 | 203 | ### 5. Read Through & Break Down the Code in the Example 204 | 205 | You _may_ have taken the time to read the code in Step 3 (_above_) ...
206 | If you did, _well done_ for challenging yourself 207 | and getting a "_head start_" on reading/learning!
208 | Reading (_other people's_) code is the _fastest_ way 209 | to learn programming skills and 210 | the _only_ way to learn useful "_patterns_".
211 | If you didn't read through the code in Step 3, that's ok! 212 | Let's walk through the functions _now_! 213 | 214 | > As always, our _hope_ is that the functions 215 | are clearly named and well-commented,
216 | please inform us if anything is unclear please 217 | ask any questions as **issues**:
218 | [github.com/dwyl/**learn-elm-architecture**-in-javascript/**issues**](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues) 219 | 220 | 221 | ### 5.1 `mount` Function Walkthrough 222 | 223 | The mount function "initializes" the app and tells the _view_ 224 | how to process a `signal` sent by the user/client. 225 | 226 | ```js 227 | function mount(model, update, view, root_element_id) { 228 | var root = document.getElementById(root_element_id); // root DOM element 229 | function signal(action) { // signal function takes action 230 | return function callback() { // and returns callback 231 | model = update(model, action); // update model according to action 232 | view(signal, model, root); // subsequent re-rendering 233 | }; 234 | }; 235 | view(signal, model, root); // render initial model (once) 236 | } 237 | ``` 238 | 239 | The `mount` function receives the following _four_ arguments: 240 | + `model`: "_initial state_" of your application 241 | (_in this case the counter which starts at 0_) 242 | + `update`: the function that gets executed when ever a "_signal_" 243 | is received from the client (_person using the app_). 244 | + `view`: the function that renders the DOM (_see: section 5.3 below_) 245 | + `root_element_id` is the `id` of the "root DOM element"; this is the DOM element
246 | where your app will be "_mounted to_". In other words your app 247 | will be _contained_ within this root element.
248 | (_so make sure it is empty before `mount`ing_) 249 | 250 | The first line in `mount` is to get a _reference_ to the root DOM element;
251 | we do this _once_ in the entire application to _minimize_ DOM lookups. 252 | 253 | #### `mount` > `signal` > `callback` ? 254 | 255 | The _interesting_ part of the `mount` function is `signal` (_inner function_)!
256 | At first this function may seem a little strange ...
257 | _Why_ are we defining a function that returns another function?
258 | If this your first time seeing this "_pattern_", 259 | welcome to the wonderful world of "_closures_"! 260 | 261 | #### _What_ is a "Closure" and _Why/How_ is it Useful? 262 | 263 | A `closure` is an inner function that has access 264 | to the outer (enclosing) function's variables—scope chain. 265 | The closure has three scope chains: it has access to its own scope 266 | (variables defined between its curly brackets), it has access to 267 | the outer function's variables, and it has access to the global variables. 268 | 269 | In the case of the `callback` function inside `signal`, 270 | the `signal` is "passed" to the various bits of UI 271 | and the `callback` gets executed when the UI gets interacted with. 272 | If we did not have the `callback` the `signal` 273 | would be executed _immediately_ when the `button` is _defined_.
274 | Whereas we only want the `signal` (`callback`) to be triggered 275 | when the button is _clicked_.
276 | Try removing the `callback` to see the effect: 277 | 278 | ![range-error-stack-exceeded](https://cloud.githubusercontent.com/assets/194400/25838395/bcb3296e-348a-11e7-8a8b-10114016cdfb.png) 279 | 280 | The `signal` is triggered when button is _created_, which _re-renders_ 281 | the `view` creating the button again. And, since the `view` renders _two_ 282 | buttons each time it creates a "_chain reaction_" which almost 283 | instantly _exceeds_ the "***call stack***" 284 | (_i.e. exhausts the allocated memory_) of the browser! 285 | 286 | Putting the `callback` in a _closure_ means we can pass a _reference_ 287 | to the `signal` (_parent/outer_) function to the `view` function. 288 | 289 | ##### Further Reading on Closures 290 | 291 | + https://developer.mozilla.org/en/docs/Web/JavaScript/Closures 292 | + http://javascriptissexy.com/understand-javascript-closures-with-ease/ 293 | + ... if closures aren't "clicking", 294 | or you want _more_ detail/examples, 295 | [***please ask***!](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues) 296 | 297 | 298 | #### 5.1.1 `mount` > render initial view 299 | 300 | The last line in the `mount` function is to _render_ the `view` function 301 | for the first time, passing in the `signal` function, initial model ("state") 302 | and root element. This is the _initial_ rendering of the UI. 303 | 304 | 305 | ### 5.2 Define the "_Actions_" in your App 306 | 307 | The next step in the Elm Architecture is to _define_ the Actions 308 | that can be taken in your application. In the case of our _counter_ 309 | example we only have _two_ (_for now_): 310 | 311 | ```js 312 | // Define the Component's Actions: 313 | var Inc = 'inc'; // increment the counter 314 | var Dec = 'dec'; // decrement the counter 315 | ``` 316 | These _Actions_ are used in the `switch` (_i.e. decide what to do_) 317 | inside the `update` function. 318 | 319 | Actions are always defined as a `String`.
320 | The Action _variable_ gets passed around inside the JS code
321 | but the `String` representation is what appears in the DOM
322 | and then gets passed in `signal` from the UI back to the `update` function. 323 | 324 | One of the biggest (_side_) benefits of defining actions like this 325 | is that it's really quick to see what the application _does_ 326 | by _reading_ the list of actions! 327 | 328 | ### 5.3 Define the `update` Function 329 | 330 | The `update` function is a simple 331 | [`switch`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/switch) 332 | statement that evaluates the `action` and "dispatches" 333 | to the required function for processing. 334 | 335 | In the case of our simple counter we aren't defining functions for each `case`: 336 | ```js 337 | function update(model, action) { // Update function takes the current model 338 | switch(action) { // and an action (String) runs a switch 339 | case Inc: return model + 1; // add 1 to the model 340 | case Dec: return model - 1; // subtract 1 from model 341 | default: return model; // if no action, return current model. 342 | } // (default action always returns current) 343 | } 344 | ``` 345 | However if the "_handlers_" for each `action` were "_bigger_", 346 | we would split them out into their own functions e.g: 347 | 348 | ```js 349 | // define the handler function used when action is "inc" 350 | function increment(model) { 351 | return model + 1 352 | } 353 | // define handler for "dec" action 354 | function decrement(model) { 355 | return model - 1 356 | } 357 | function update(model, action) { // Update function takes the current state 358 | switch(action) { // and an action (String) runs a switch 359 | case Inc: return increment(model); // add 1 to the model 360 | case Dec: return decrement(model); // subtract 1 from model 361 | default: return model; // if no action, return current state. 362 | } // (default action always returns current) 363 | } 364 | ``` 365 | This is _functionally_ equivalent to the simpler `update` (_above_)
366 | But does not offer any _advantage_ at this stage (_just remember it for later_). 367 | 368 | ### 5.4 Define the `view` Function 369 | 370 | The `view` function is responsible 371 | for _rendering_ the `state` to the DOM.
372 | 373 | ```js 374 | function view(signal, model, root) { 375 | empty(root); // clear root element before 376 | [ // Store DOM nodes in an array 377 | button('+', signal, Inc), // create button (defined below) 378 | div('count', model), // show the "state" of the Model 379 | button('-', signal, Dec) // button to decrement counter 380 | ].forEach(function(el){ root.appendChild(el) }); // forEach is ES5 so IE9+ 381 | } 382 | ``` 383 | 384 | The `view` receives three arguments: 385 | + `signal` defined above in `mount` tells each (DOM) element 386 | how to "handle" the user input. 387 | + `model` a reference to the _current_ value of the counter. 388 | + `root` a reference to the root DOM element where the app is _mounted_. 389 | 390 | The `view` function starts by _emptying_ 391 | the DOM inside the `root` element using the `empty` helper function.
392 | This is _necessary_ because, in the Elm Architecture, we _re-render_ 393 | the _entire_ application for each action.
394 | 395 | > See note on DOM Manipulation and "Virtual DOM" (_below_) 396 | 397 | The `view` creates a _list_ (`Array`) of DOM nodes that need to be rendered. 398 | 399 | 400 | #### 5.4.1 `view` helper functions: `empty`, `button` and `div` 401 | 402 | The `view` makes use of three "helper" (_DOM manipulation_) functions: 403 | 404 | 1. `empty`: empty the `root` element of any "child" nodes. 405 | _Essentially_ `delete` the DOM inside whichever element's passed into `empty`. 406 | ```js 407 | function empty(node) { 408 | while (node.firstChild) { // while there are still nodes inside the "parent" 409 | node.removeChild(node.firstChild); // remove any children recursively 410 | } 411 | } 412 | ``` 413 | 414 | 2. `button`: creates a 415 | [` 583 |
0
584 | 585 | 590 | ``` 591 | 592 | 593 | This counter _does_ the same thing as 594 | our Elm Architecture example (_above_),
595 | and to the _end-user_ the UI **_looks_ identical**: 596 | 597 | ![counter-impure-665](https://cloud.githubusercontent.com/assets/194400/25816521/3a0e0722-341c-11e7-9afc-269abb4bb225.png) 598 | 599 | 600 | The difference is that in the _impure_ example is "_mutating state_" 601 | and it's impossible to predict what that state will be! 602 | 603 | > _Annoyingly, for the person explaining the benefits 604 | of function "purity" and the virtues of the Elm Architecture
605 | the "impure" example is both **fewer lines of code** 606 | (which means it **loads faster**!), takes less time to read
607 | and renders faster because only the `
` text content 608 | is being updated on each update!
609 | > This is why it can often be **difficult to explain** to "**non-technical**" 610 | **people** that code which has similar output
611 | on the **screen**(s) 612 | might **not the same** quality "**behind the scenes**"!_
613 | > _Writing impure functions is like setting off on a marathon run after 614 | [tying your shoelaces **incorrectly**](https://youtu.be/zAFcV7zuUDA) ...
615 | You might be "OK" for a while, but pretty soon your laces will come undone 616 | and you will have to **stop** and **re-do** them._ 617 | 618 | 619 | To conclude: Pure functions do not mutate a "global" state 620 | and are thus predictable and easy to test; 621 | we _always_ use "Pure" functions in Apps built with the Elm Architecture. 622 | The moment you use "_impure_" functions you forfeit reliability. 623 | 624 | 625 | ### 9. Extend the Counter Example following "TDD": Reset the Count! 626 | 627 | As you (_hopefully_) recall from our 628 | [Step-by-Step TDD Tutorial](https://github.com/dwyl/learn-tdd), 629 | when we craft code following the "TDD" approach, 630 | we go through the following steps: 631 | 1. Read and understand the "user story" 632 | (_e.g: in this case_: 633 | [issues/5](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/5)) 634 | ![reset-counter-user-story](https://cloud.githubusercontent.com/assets/194400/25817522/84fdd9bc-341f-11e7-9efd-406d76a3b1f3.png)
635 | 2. Make sure the "_acceptance criteria_" are clear 636 | (_the checklist in the issue_) 637 | 3. Write your test(s) based on the acceptance criteria. 638 | (_Tip: a single feature - in this case resetting the counter - can 639 | and often `should` have multiple tests to cover all cases._) 640 | 4. Write code to make the test(s) pass. 641 | 642 | > `BEFORE` you continue, try and build the "reset" 643 | functionality yourself following TDD approach! 644 | 645 | 646 | 647 |


648 | 649 | #### 9.1 Tests for Resetting the Counter (Update) 650 | 651 | We _always_ start with the Model test(s) 652 | (_because they are the easiest_): 653 | 654 | ```js 655 | test('Test: reset counter returns 0', function(assert) { 656 | var result = update(6, "reset"); 657 | assert.equal(result, 0); 658 | }); 659 | ``` 660 | #### 9.2 Watch it Fail! 661 | 662 | Watch the test _fail_ in your Web Browser:
663 | ![reset-counter-failing-test](https://cloud.githubusercontent.com/assets/194400/25818566/e2c33152-3422-11e7-9c4c-9ecd9fa9ffc6.png) 664 | 665 | #### 9.3 Make it Pass (_writing the minimum code_) 666 | 667 | In the case of an App written with the Elm Architecture, 668 | the minimum code is: 669 | + Action in this case `var Res = 'reset';` 670 | + Update (_case and/or function_) to "_process the signal_" from the UI 671 | (_i.e. handle the user's desired action_) 672 | ```js 673 | case Res: return 0; 674 | ``` 675 | ![reset-counter-test-passing](https://cloud.githubusercontent.com/assets/194400/25818892/05349e96-3424-11e7-8d42-b4cbbc1eb1a6.png) 676 | 677 | #### 9.4 Write View (UI) Tests 678 | 679 | Once we have the Model tests passing 680 | we need to give the _user_ something to interact with!
681 | We are going to be "_adventurous_" and write _two_ tests this time!
682 | (_thankfully we already have a UI test for another button we can "copy"_) 683 | 684 | ```js 685 | test('reset button should be present on page', function(assert) { 686 | var reset = document.getElementsByClassName('reset'); 687 | assert.equal(reset.length, 1); 688 | }); 689 | 690 | test('Click reset button resets model (counter) to 0', function(assert) { 691 | mount(7, update, view, id); // set initial state 692 | var root = document.getElementById(id); 693 | assert.equal(root.getElementsByClassName('count')[0].textContent, 7); 694 | var btn = root.getElementsByClassName("reset")[0]; // click reset button 695 | btn.click(); // Click the Reset button! 696 | var state = root.getElementsByClassName('count')[0].textContent; 697 | empty(document.getElementById(id)); // Clear the test DOM elements 698 | }); 699 | ``` 700 | #### 9.5 Watch View/UI Tests Fail! 701 | 702 | Watch the UI tests go red in the browser: 703 | 704 | ![reset-counter-failing-tests](https://cloud.githubusercontent.com/assets/194400/25819267/59ea1a64-3425-11e7-8f77-2380c6518b9d.png) 705 | 706 | #### 9.6 Make UI Tests Pass (_writing the minimum code_) 707 | 708 | Luckily, to make _both_ these tests _pass_ requires 709 | a _single_ line of code in the `view` function! 710 | 711 | ```js 712 | button('Reset', signal, Res) 713 | ``` 714 | ![reset-counter](https://cloud.githubusercontent.com/assets/194400/25822128/82eb7a8e-342f-11e7-9cd0-1a69d95ee878.gif) 715 | 716 |
717 | 718 | ### 10. _Next Level: Multiple Counters_! 719 | 720 | Now that you have _understood_ the Elm Architecture 721 | by following the basic (_single_) counter example, 722 | it's time to take the example to the next level: 723 | multiple counters on the same page! 724 | 725 | #### Multiple Counters Exercise 726 | 727 | Follow your _instincts_ and `try` to the following: 728 | 729 | **1.** **Refactor** the "reset counter" example 730 | to use an `Object` for the `model` (_instead of an_ `Integer`)
731 | **e.g**: `var model = { counters: [0] }`
732 | where the value of the first element in the `model.counters` Array 733 | is the value for the _single_ counter example.
734 | 735 | **2.** **Display _multiple_ counters** on the **_same_ page** 736 | using the `var model = { counters: [0] }` approach.
737 | 738 | **3.** **Write tests** for the scenario where there 739 | are multiple counters on the same page. 740 | 741 | Once you have had a go, checkout our solutions: 742 | [`examples/multiple-counters`](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/multiple-counters) 743 |
744 | and corresponding writeup: 745 | [**multiple-counters.md**](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/multiple-counters.md) 746 | 747 | 748 |
749 | 750 | ### 11. Todo List! 751 | 752 | The _ultimate_ test of whether you _learned/understood_ something is
753 | _applying_ your knowledge to _different_ context from the one you learned in. 754 | 755 | Let's "_turn this up to eleven_" and build something "_useful_"! 756 | 757 | GOTO: 758 | [`todo-list.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/todo-list.md) 759 | 760 |
761 | 762 | 763 | ## Futher/Background Reading 764 | 765 | + The Elm Architecture Simple, yet powerful – An overview by example: 766 | https://dennisreimann.de/articles/elm-architecture-overview.html 767 | (_written in Elm so not much use for people who only know JS, 768 | but a good post for further reading!_) 769 | + What does it mean when something is "_easy to **reason about**_"? 770 | http://stackoverflow.com/questions/18666821/what-does-the-term-reason-about-mean-in-computer-science 771 | + Elm Architecture with JQuery by @steos: 772 | https://medium.com/javascript-inside/elm-architecture-with-jquery-152cb98a62f 773 | (_written in JQuery and no Tests so 774 | not ideal for teaching beginners good habits, but still a v. good post!_) 775 | + Pure functions: https://en.wikipedia.org/wiki/Pure_function 776 | + Higher Order Functions in JavaScript: 777 | http://eloquentjavascript.net/05_higher_order.html 778 | + Higher-order functions - Part 1 of Functional Programming in JavaScript: 779 | https://youtu.be/BMUiFMZr7vk 780 | 781 | 782 |


783 | # tl;dr 784 | 785 | 786 | ### _Flattening_ the Learning Curve 787 | 788 | The issue of the "Elm Learning Curve" was raised in: 789 | [github.com/dwyl/**learn-elm**/issues/**45**](https://github.com/dwyl/learn-elm/issues/45)
790 | and scrolling down to to @lucymonie's 791 | [list](https://github.com/dwyl/learn-elm/issues/45#issuecomment-275947200) 792 | we see the **Elm _Architecture_** at number four ...
793 | `this` seems fairly logical (_initially_) because the _Elm **Guide**_ 794 | uses the _Elm **Language**_ to explain the _Elm **Architecture**_: 795 | https://guide.elm-lang.org/architecture 796 | 797 | ![elm-architecture](https://cloud.githubusercontent.com/assets/194400/25771470/72eccdd6-324a-11e7-8723-f07bcc188c21.png) 798 | 799 | i.e. it ***assumes*** that people **already _understand_** 800 | the (Core) _Elm **Language**_...
801 | This is a _fair_ assumption given the _ordering_ of the Guide _however_ 802 | ... we have a _different_ idea: 803 | 804 | ### Hypothesis: Learn (& Practice) Elm Architecture _`before`_ Learning Elm? 805 | 806 | We ***hypothesize*** that if we _**explain** the **Elm Architecture**_ 807 | (_**in detail**_) using a **language**
808 | people are _**already familiar**_ with (_i.e **JavaScript**_) 809 | _`before`_ diving into the Elm Language
810 | it will 811 | ["***flatten***"](https://english.stackexchange.com/questions/6212/whats-the-opposite-for-steep-learning-curve) 812 | the **learning curve**. 813 | 814 | > _**Note**: Understanding the **Elm Architecture** 815 | will give you a **massive headstart**
816 | on [learning **Redux**](https://github.com/dwyl/learn-redux) 817 | which is the "de facto" way of structuring React.js Apps.
818 | So even if you 819 | decide not to learn/use Elm, you will still gain 820 | **great frontend skills**!_ 821 | 822 | ### Isn't DOM Manipulation Super Slow...? 823 | 824 | > _DOM manipulation is the **slowest** 825 | part of any "**client-side**" web app.
826 | > That is why so many client-side frameworks 827 | (including **Elm**, React and Vue.js) now use a "**Virtual DOM**". 828 | > For the purposes of `this` tutorial, and for **most small apps** 829 | Virtual DOM is total **overkill**!
830 | It's akin to putting a **jet engine** in a [**go kart**](https://en.wikipedia.org/wiki/Go-kart)!_ 831 | 832 | ### What is "_Plain_" JavaScript? 833 | 834 | "_Plain_" JavaScript just means not using _any_ frameworks 835 | or features that require "compilation". 836 | 837 | The point is to _understand_ that you don't need 838 | _anything_ more than 839 | ["***JavaScript the Good Parts***"](https://github.com/iteles/Javascript-the-Good-Parts-notes)
840 | to build something full-featured and easy/fast to read!! 841 | 842 | [![babel](https://cloud.githubusercontent.com/assets/194400/25772913/72a818f4-326c-11e7-8020-9b5dab715987.png)](https://twitter.com/iamdevloper/status/787969734918668289 "Babel, how to show off that you don't have core ES5 skills.") 843 | 844 | If you can build with "ES5" JavaScript:
845 | **a)** you side-step the 846 | [_noise_](https://twitter.com/iamdevloper/status/610191865216786432) 847 | and focus on core skills that **_already_ work everywhere**!
848 | (_don't worry you can always "top-up" your 849 | JS knowledge later with ES6, etc!_)
850 | **b)** you **don't** need to **waste time** installing 851 | [_**Two Hundred Megabytes**_](https://cloud.githubusercontent.com/assets/194400/13321493/39fcfa30-dbc7-11e5-8b05-f046675f9cb6.png) 852 | of dependencies just to run a simple project!
853 | **c)** You ***save time*** (_for yourself, your team and end-users!_) 854 | because your code is _already_ optimized to run in _any_ browser! 855 | -------------------------------------------------------------------------------- /examples/counter-basic-impure/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | IMPURE Counter Example (DON'T DO THIS!!) 8 | 10 | 11 | 12 | 13 | 14 | 15 |
0
16 | 17 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /examples/counter-basic-test/counter.js: -------------------------------------------------------------------------------- 1 | // Define the Component's Actions: 2 | var Inc = 'inc'; // increment the counter 3 | var Dec = 'dec'; // decrement the counter 4 | 5 | function update(model, action) { // Update function takes the current state 6 | switch(action) { // and an action (String) runs a switch 7 | case Inc: return model + 1; // add 1 to the model 8 | case Dec: return model - 1; // subtract 1 from model 9 | default: return model; // if no action, return curent state. 10 | } // (default action always returns current) 11 | } 12 | 13 | function view(signal, model, root) { 14 | empty(root); // clear root element before 15 | return [ // Store DOM nodes in an array 16 | button('+', signal, Inc), // then iterate to append them 17 | div('count', model), // avoids repetition. 18 | button('-', signal, Dec) 19 | ].forEach(function(el){ root.appendChild(el) }); // forEach is ES5 so IE9+ 20 | } // yes, for loop is "faster" than forEach, but readability trumps "perf" here! 21 | 22 | // Mount Function receives all MUV and mounts the app in the "root" DOM Element 23 | function mount(model, update, view, root_element_id) { 24 | var root = document.getElementById(root_element_id); // root DOM element 25 | function signal(action) { // signal function takes action 26 | return function callback() { // and returns callback 27 | model = update(model, action); // update model according to action 28 | view(signal, model, root); // subsequent re-rendering 29 | }; 30 | }; 31 | view(signal, model, root); // render initial model (once) 32 | } 33 | 34 | // The following are "Helper" Functions which each "Do ONLY One Thing" and are 35 | // used in the "View" function to render the Model (State) to the Browser DOM: 36 | 37 | // empty the contents of a given DOM element "node" (before re-rendering) 38 | function empty(node) { 39 | while (node.firstChild) { 40 | node.removeChild(node.firstChild); 41 | } 42 | } // Inspired by: stackoverflow.com/a/3955238/1148249 43 | 44 | function button(text, signal, action) { 45 | var button = document.createElement('button'); 46 | var text = document.createTextNode(text); // human-readable button text 47 | button.appendChild(text); // text goes *inside* not attrib 48 | button.className = action; // use action as CSS class 49 | button.onclick = signal(action); // onclick tells how to process 50 | return button; // return the DOM node(s) 51 | } // how to create a button in JavaScript: stackoverflow.com/a/8650996/1148249 52 | 53 | function div(divid, text) { 54 | var div = document.createElement('div'); 55 | div.id = divid; 56 | div.className = divid; 57 | if(text !== undefined) { // if text is passed in render it in a "Text Node" 58 | var txt = document.createTextNode(text); 59 | div.appendChild(txt); 60 | } 61 | return div; 62 | } 63 | -------------------------------------------------------------------------------- /examples/counter-basic-test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | Elm Architecture in JS - Counter Tests 8 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 20 | 21 | 22 |
23 |
24 | 25 | 26 | 27 | 28 | 29 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/counter-basic-test/test.js: -------------------------------------------------------------------------------- 1 | var id = 'test-app'; 2 | 3 | test('Test Update update(0) returns 0 (current state)', function(assert) { 4 | var result = update(0); 5 | assert.equal(result, 0); 6 | }); 7 | 8 | test('Test Update increment: update(1, "inc") returns 2', function(assert) { 9 | var result = update(1, "inc"); 10 | assert.equal(result, 2); 11 | }); 12 | 13 | test('Test Update decrement: update(3, "dec") returns 2', function(assert) { 14 | var result = update(1, "dec"); 15 | assert.equal(result, 0); 16 | }); 17 | 18 | test('Test negative state: update(-9, "inc") returns -8', function(assert) { 19 | var result = update(-9, "inc"); 20 | assert.equal(result, -8); 21 | }); 22 | 23 | test('mount({model: 9, update: update, view: view}, "' 24 | + id +'") sets initial state to 9', function(assert) { 25 | mount(9, update, view, id); 26 | var state = document.getElementById(id) 27 | .getElementsByClassName('count')[0].textContent; 28 | assert.equal(state, 9); 29 | }); 30 | 31 | test('empty("test-app") should clear DOM in root node', function(assert) { 32 | empty(document.getElementById(id)); 33 | mount(7, update, view, id); 34 | empty(document.getElementById(id)); 35 | var result = document.getElementById(id).innerHtml 36 | assert.equal(result, undefined); 37 | }); 38 | 39 | test('click on "+" button to re-render state (increment model by 1)', 40 | function(assert) { 41 | mount(7, update, view, id); 42 | document.getElementById(id).getElementsByClassName('inc')[0].click(); 43 | var state = document.getElementById(id) 44 | .getElementsByClassName('count')[0].textContent; 45 | assert.equal(state, 8); // model was incremented successfully 46 | empty(document.getElementById(id)); 47 | }); 48 | -------------------------------------------------------------------------------- /examples/counter-basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | Elm Architecture in Pure JavaScript - Simple Counter Example 8 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 84 | 85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | 95 | 96 | 97 |
click me
98 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /examples/counter-reset-keyboard/counter.js: -------------------------------------------------------------------------------- 1 | /* if require is available, it means we are in Node.js Land i.e. testing! 2 | in the broweser, the "elmish" DOM functions are loaded in a 13 | 14 | 15 |
16 | 17 | 18 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /examples/counter-reset-keyboard/test.js: -------------------------------------------------------------------------------- 1 | var id = 'test-app'; 2 | 3 | test('Test Update update(0) returns 0 (current state)', function(assert) { 4 | var result = update('unrecognised', 0); 5 | assert.equal(result, 0); 6 | }); 7 | 8 | test('Test Update increment: update(1, "inc") returns 2', function(assert) { 9 | var result = update("inc", 1,); 10 | assert.equal(result, 2); 11 | }); 12 | 13 | test('Test Update decrement: update("dec", 3) returns 2', function(assert) { 14 | var result = update("dec", 3); 15 | assert.equal(result, 2); 16 | }); 17 | 18 | test('Test negative state: update("inc", -9) returns -8', function(assert) { 19 | var result = update("inc", -9, ); 20 | assert.equal(result, -8); 21 | }); 22 | 23 | test('mount({model: 7, update: update, view: view}, "' 24 | + id +'") sets initial state to 7', function(assert) { 25 | mount(7, update, view, id); 26 | var state = document.getElementById(id) 27 | .getElementsByClassName('count')[0].textContent; 28 | assert.equal(state, 7); 29 | }); 30 | 31 | test('empty("test-app") should clear DOM in root node', function(assert) { 32 | empty(document.getElementById(id)); 33 | mount(7, update, view, id); 34 | empty(document.getElementById(id)); 35 | var result = document.getElementById(id).innerHtml 36 | assert.equal(result, undefined); 37 | }); 38 | 39 | test('click on "+" button to re-render state (increment model by 1)', 40 | function(assert) { 41 | document.body.appendChild(div(id)); 42 | mount(7, update, view, id); 43 | document.getElementById(id).getElementsByClassName('inc')[0].click(); 44 | var state = document.getElementById(id) 45 | .getElementsByClassName('count')[0].textContent; 46 | assert.equal(state, 8); // model was incremented successfully 47 | empty(document.getElementById(id)); // clean up after tests 48 | }); 49 | 50 | // Reset Functionality 51 | 52 | test('Test reset counter when model/state is 6 returns 0', function(assert) { 53 | var result = update("reset", 6); 54 | assert.equal(result, 0); 55 | }); 56 | 57 | test('reset button should be present on page', function(assert) { 58 | var reset = document.getElementsByClassName('reset'); 59 | assert.equal(reset.length, 1); 60 | }); 61 | 62 | test('Click reset button resets state to 0', function(assert) { 63 | mount(7, update, view, id); 64 | var root = document.getElementById(id); 65 | assert.equal(root.getElementsByClassName('count')[0].textContent, 7); 66 | var btn = root.getElementsByClassName("reset")[0]; // click reset button 67 | btn.click(); // Click the Reset button! 68 | var state = root.getElementsByClassName('count')[0].textContent; 69 | assert.equal(state, 0); // state was successfully reset to 0! 70 | empty(root); // clean up after tests 71 | }); 72 | -------------------------------------------------------------------------------- /examples/counter-reset/counter.js: -------------------------------------------------------------------------------- 1 | // Define the Component's Actions: 2 | var Inc = 'inc'; // increment the counter 3 | var Dec = 'dec'; // decrement the counter 4 | var Res = 'reset'; // reset counter: git.io/v9KJk 5 | 6 | function update (action, model) { // Update function takes the current state 7 | switch(action) { // and an action (String) runs a switch 8 | case Inc: return model + 1; // add 1 to the model 9 | case Dec: return model - 1; // subtract 1 from model 10 | case Res: return 0; // reset state to 0 (Zero) git.io/v9KJk 11 | default: return model; // if no action, return curent state. 12 | } // (default action always returns current) 13 | } 14 | 15 | function view(model, signal) { 16 | return container([ // Store DOM nodes in an array 17 | button('+', signal, Inc), // then iterate to append them 18 | div('count', model), // create div with stat as text 19 | button('-', signal, Dec), // decrement counter 20 | button('Reset', signal, Res) // reset counter 21 | ]); // forEach is ES5 so IE9+ 22 | } // yes, for loop is "faster" than forEach, but readability trumps "perf" here! 23 | 24 | // Mount Function receives all MUV and mounts the app in the "root" DOM Element 25 | function mount(model, update, view, root_element_id) { 26 | var root = document.getElementById(root_element_id); // root DOM element 27 | function signal(action) { // signal function takes action 28 | return function callback() { // and returns callback 29 | model = update(action, model); // update model according to action 30 | empty(root); 31 | root.appendChild(view(model, signal)); // subsequent re-rendering 32 | }; 33 | }; 34 | root.appendChild(view(model, signal)); // render initial model (once) 35 | } 36 | 37 | // The following are "Helper" Functions which each "Do ONLY One Thing" and are 38 | // used in the "View" function to render the Model (State) to the Browser DOM: 39 | 40 | // empty the contents of a given DOM element "node" (before re-rendering) 41 | function empty(node) { 42 | while (node.firstChild) { 43 | node.removeChild(node.firstChild); 44 | } 45 | } // Inspired by: stackoverflow.com/a/3955238/1148249 46 | 47 | function button(text, signal, action) { 48 | var button = document.createElement('button'); 49 | var text = document.createTextNode(text); // human-readable button text 50 | button.appendChild(text); // text goes *inside* not attrib 51 | button.className = action; // use action as CSS class 52 | button.id = action; 53 | // console.log(signal, ' action:', action) 54 | button.onclick = signal(action); // onclick tells how to process 55 | return button; // return the DOM node(s) 56 | } // how to create a button in JavaScript: stackoverflow.com/a/8650996/1148249 57 | 58 | function div(divid, text) { 59 | var div = document.createElement('div'); 60 | div.id = divid; 61 | div.className = divid; 62 | if(text !== undefined) { // if text is passed in render it in a "Text Node" 63 | var txt = document.createTextNode(text); 64 | div.appendChild(txt); 65 | } 66 | return div; 67 | } 68 | 69 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section 70 | function container(elements) { 71 | var con = document.createElement('section'); 72 | con.className = 'counter'; 73 | elements.forEach(function(el) { con.appendChild(el) }); 74 | return con; 75 | } 76 | 77 | /* The code block below ONLY Applies to tests run using Node.js */ 78 | /* istanbul ignore else */ 79 | if (typeof module !== 'undefined' && module.exports) { 80 | module.exports = { 81 | view: view, 82 | mount: mount, 83 | update: update, 84 | div: div, 85 | button: button, 86 | empty: empty, 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /examples/counter-reset/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | Elm Architecture in JS - Counter Reset 8 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 20 | 21 | 22 |
23 |
24 | 25 | 26 | 27 | 28 | 29 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/counter-reset/test.js: -------------------------------------------------------------------------------- 1 | var id = 'test-app'; 2 | 3 | test('Test Update update(0) returns 0 (current state)', function(assert) { 4 | var result = update('unrecognised', 0); 5 | assert.equal(result, 0); 6 | }); 7 | 8 | test('Test Update increment: update(1, "inc") returns 2', function(assert) { 9 | var result = update("inc", 1,); 10 | assert.equal(result, 2); 11 | }); 12 | 13 | test('Test Update decrement: update("dec", 3) returns 2', function(assert) { 14 | var result = update("dec", 3); 15 | assert.equal(result, 2); 16 | }); 17 | 18 | test('Test negative state: update("inc", -9) returns -8', function(assert) { 19 | var result = update("inc", -9, ); 20 | assert.equal(result, -8); 21 | }); 22 | 23 | test('mount({model: 7, update: update, view: view}, "' 24 | + id +'") sets initial state to 7', function(assert) { 25 | mount(7, update, view, id); 26 | var state = document.getElementById(id) 27 | .getElementsByClassName('count')[0].textContent; 28 | assert.equal(state, 7); 29 | }); 30 | 31 | test('empty("test-app") should clear DOM in root node', function(assert) { 32 | empty(document.getElementById(id)); 33 | mount(7, update, view, id); 34 | empty(document.getElementById(id)); 35 | var result = document.getElementById(id).innerHtml 36 | assert.equal(result, undefined); 37 | }); 38 | 39 | test('click on "+" button to re-render state (increment model by 1)', 40 | function(assert) { 41 | document.body.appendChild(div(id)); 42 | mount(7, update, view, id); 43 | document.getElementById(id).getElementsByClassName('inc')[0].click(); 44 | var state = document.getElementById(id) 45 | .getElementsByClassName('count')[0].textContent; 46 | assert.equal(state, 8); // model was incremented successfully 47 | empty(document.getElementById(id)); // clean up after tests 48 | }); 49 | 50 | // Reset Functionality 51 | 52 | test('Test reset counter when model/state is 6 returns 0', function(assert) { 53 | var result = update("reset", 6); 54 | assert.equal(result, 0); 55 | }); 56 | 57 | test('reset button should be present on page', function(assert) { 58 | var reset = document.getElementsByClassName('reset'); 59 | assert.equal(reset.length, 1); 60 | }); 61 | 62 | test('Click reset button resets state to 0', function(assert) { 63 | mount(7, update, view, id); 64 | var root = document.getElementById(id); 65 | assert.equal(root.getElementsByClassName('count')[0].textContent, 7); 66 | var btn = root.getElementsByClassName("reset")[0]; // click reset button 67 | btn.click(); // Click the Reset button! 68 | var state = root.getElementsByClassName('count')[0].textContent; 69 | assert.equal(state, 0); // state was successfully reset to 0! 70 | empty(root); // clean up after tests 71 | }); 72 | -------------------------------------------------------------------------------- /examples/multiple-counters-instances/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | Elm Architecture in JS - Counter Reset 8 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 21 | 22 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /examples/multiple-counters/counter.js: -------------------------------------------------------------------------------- 1 | // Define the Component's Actions: 2 | var Inc = 'inc'; // increment the counter 3 | var Dec = 'dec'; // decrement the counter 4 | var Res = 'reset'; // reset counter: git.io/v9KJk 5 | 6 | function update(model, action) { // Update function takes the current state 7 | var parts = action ? action.split('-') : []; // e.g: inc-0 where 0 is the counter "id" 8 | var act = parts[0]; 9 | var index = parts[1] || 0; 10 | var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model 11 | switch(act) { // and an action (String) runs a switch 12 | case Inc: 13 | new_model.counters[index] = model.counters[index] + 1; 14 | break; 15 | case Dec: 16 | new_model.counters[index] = model.counters[index] - 1; 17 | break; 18 | case Res: // use ES6 Array.fill to create a new array with values set to 0: 19 | new_model.counters[index] = 0; 20 | break; 21 | default: return model; // if action not defined, return curent state. 22 | } 23 | return new_model; 24 | } 25 | 26 | function view(signal, model, root) { 27 | empty(root); // clear root element before re-rendering the App (DOM). 28 | model.counters.map(function(counter, index) { 29 | return container(index, [ // wrap DOM nodes in an "container" 30 | button('+', signal, Inc + '-' + index), // append index to action 31 | div('count', counter), // create div w/ count as text 32 | button('-', signal, Dec + '-' + index), // decrement counter 33 | button('Reset', signal, Res + '-' + index) // reset counter 34 | ]); 35 | }).forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+ 36 | } 37 | 38 | // Mount Function receives all MUV and mounts the app in the "root" DOM Element 39 | function mount(model, update, view, root_element_id) { 40 | var root = document.getElementById(root_element_id); // root DOM element 41 | function signal(action) { // signal function takes action 42 | return function callback() { // and returns callback 43 | model = update(model, action); // update model according to action 44 | view(signal, model, root); // subsequent re-rendering 45 | }; 46 | }; 47 | view(signal, model, root); // render initial model (once) 48 | } 49 | 50 | // The following are "Helper" Functions which each "Do ONLY One Thing" and are 51 | // used in the "View" function to render the Model (State) to the Browser DOM: 52 | 53 | // empty the contents of a given DOM element "node" (before re-rendering) 54 | function empty(node) { 55 | while (node.firstChild) { 56 | node.removeChild(node.firstChild); 57 | } 58 | } // Inspired by: stackoverflow.com/a/3955238/1148249 59 | 60 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section 61 | function container(index, elements) { 62 | var con = document.createElement('section'); 63 | con.id = index; 64 | con.className = 'counter'; 65 | elements.forEach(function(el) { con.appendChild(el) }); 66 | return con; 67 | } 68 | 69 | function button(text, signal, action) { 70 | var button = document.createElement('button'); 71 | var text = document.createTextNode(text); // human-readable button text 72 | button.appendChild(text); // text goes *inside* not attrib 73 | button.className = action.split('-')[0]; // use action as CSS class 74 | button.id = action; 75 | // console.log(signal, ' action:', action) 76 | button.onclick = signal(action); // onclick tells how to process 77 | return button; // return the DOM node(s) 78 | } // how to create a button in JavaScript: stackoverflow.com/a/8650996/1148249 79 | 80 | function div(divid, text) { 81 | var div = document.createElement('div'); 82 | div.id = divid; 83 | div.className = divid; 84 | if(text !== undefined) { // if text is passed in render it in a "Text Node" 85 | var txt = document.createTextNode(text); 86 | div.appendChild(txt); 87 | } 88 | return div; 89 | } 90 | -------------------------------------------------------------------------------- /examples/multiple-counters/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | Elm Architecture in JS - Counter Reset 8 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /examples/multiple-counters/test.js: -------------------------------------------------------------------------------- 1 | var id = 'test-app'; 2 | 3 | test('update({counters:[0]}) returns {counters:[0]} (current state unmodified)', 4 | function(assert) { 5 | var result = update({counters:[0]}); 6 | assert.equal(result.counters[0], 0); 7 | }); 8 | 9 | test('Test Update increment: update(1, "inc") returns 2', function(assert) { 10 | var result = update({counters: [1] }, "inc"); 11 | console.log('result', result); 12 | assert.equal(result.counters[0], 2); 13 | }); 14 | 15 | 16 | test('Test Update decrement: update(1, "dec") returns 0', function(assert) { 17 | var result = update({counters: [1] }, "dec"); 18 | assert.equal(result.counters[0], 0); 19 | }); 20 | 21 | test('Test negative state: update(-9, "inc") returns -8', function(assert) { 22 | var result = update({counters: [-9] }, "inc"); 23 | assert.equal(result.counters[0], -8); 24 | }); 25 | 26 | test('mount({model: 7, update: update, view: view}, "' 27 | + id +'") sets initial state to 7', function(assert) { 28 | mount({counters:[7]}, update, view, id); 29 | var state = document.getElementById(id) 30 | .getElementsByClassName('count')[0].textContent; 31 | assert.equal(state, 7); 32 | }); 33 | 34 | test('empty("test-app") should clear DOM in root node', function(assert) { 35 | empty(document.getElementById(id)); 36 | mount({counters:[7]}, update, view, id); 37 | empty(document.getElementById(id)); 38 | var result = document.getElementById(id).innerHtml 39 | assert.equal(result, undefined); 40 | }); 41 | 42 | test('click on "+" button to re-render state (increment model by 1)', 43 | function(assert) { 44 | document.body.appendChild(div(id)); 45 | mount({counters:[7]}, update, view, id); 46 | document.getElementById(id).getElementsByClassName('inc')[0].click(); 47 | var state = document.getElementById(id) 48 | .getElementsByClassName('count')[0].textContent; 49 | assert.equal(state, 8); // model was incremented successfully 50 | empty(document.getElementById(id)); // clean up after tests 51 | }); 52 | 53 | // Reset Functionality 54 | 55 | test('Test reset counter when model/state is 6 returns 0', function(assert) { 56 | var result = update({counters:[7]}, "reset"); 57 | assert.equal(result.counters[0], 0); 58 | }); 59 | 60 | test('reset button should be present on page', function(assert) { 61 | var reset = document.getElementsByClassName('reset'); 62 | assert.equal(reset.length, 3); 63 | }); 64 | 65 | test('Click reset button resets state to 0', function(assert) { 66 | mount({counters:[7]}, update, view, id); 67 | var root = document.getElementById(id); 68 | assert.equal(root.getElementsByClassName('count')[0].textContent, 7); 69 | var btn = root.getElementsByClassName("reset")[0]; // click reset button 70 | btn.click(); // Click the Reset button! 71 | var state = root.getElementsByClassName('count')[0].textContent; 72 | assert.equal(state, 0); // state was successfully reset to 0! 73 | empty(root); // clean up after tests 74 | }); 75 | -------------------------------------------------------------------------------- /examples/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Courier, "Lucida Console", monospace; 3 | font-size: 4em; 4 | text-align: center; 5 | background-color: white; 6 | } 7 | button { 8 | font-size: 0.5em; color:white; border:5px solid; border-radius: 0.5em; 9 | padding:0.1em; margin: 0.2em auto; 10 | display: block; width: 20%; 11 | } 12 | .inc { 13 | background-color: #2ecc71; border-color: #27ae60; 14 | } 15 | .dec { 16 | background-color: #e74c3c; border-color: #c0392b; 17 | } 18 | .reset { 19 | background-color: #f39c12; border-color: #e67e22; 20 | } 21 | 22 | #qunit { 23 | padding-top: 0.5em; 24 | width: 100%; 25 | clear: both; 26 | } 27 | 28 | #qunit-header { /* just cause the default style makes the header HUGE!! */ 29 | font-size: 0.4em !important; 30 | } 31 | 32 | /* specific to multiple counters */ 33 | section { 34 | background-color: white; 35 | float: left; 36 | padding-right: 1%; 37 | width: 32%; 38 | } 39 | section button { 40 | width: 100%; 41 | } 42 | -------------------------------------------------------------------------------- /examples/todo-list/elmish.js: -------------------------------------------------------------------------------- 1 | /** 2 | * `empty` the contents of a given DOM element "node" (before re-rendering). 3 | * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249 4 | * @param {Object} node the exact DOM node you want to empty the contents of. 5 | * @example 6 | * // returns true (once the 'app' node is emptied) 7 | * const node = document.getElementById('app'); 8 | * empty(node); 9 | */ 10 | function empty (node) { 11 | while (node.lastChild) { 12 | node.removeChild(node.lastChild); 13 | } 14 | } // this function produces a (DOM) "mutation" but has no other "side effects". 15 | 16 | /** 17 | * `mount` mounts the app in the "root" DOM Element. 18 | * @param {Object} model store of the application's state. 19 | * @param {Function} update how the application state is updated ("controller") 20 | * @param {Function} view function that renders HTML/DOM elements with model. 21 | * @param {String} root_element_id root DOM element in which the app is mounted 22 | * @param {Function} subscriptions any event listeners the application needs 23 | */ 24 | function mount (model, update, view, root_element_id, subscriptions) { 25 | var ROOT = document.getElementById(root_element_id); // root DOM element 26 | var store_name = 'todos-elmish_' + root_element_id; // test-app !== app 27 | 28 | function render (mod, sig, root) { // DRY rendering code (invoked twice) 29 | localStorage.setItem(store_name, JSON.stringify(mod)); // save the model! 30 | empty(root); // clear root element (container) before (re)rendering 31 | root.appendChild(view(mod, sig)) // render view based on model & signal 32 | } 33 | 34 | function signal(action, data, model) { // signal function takes action 35 | return function callback() { // and returns callback 36 | model = JSON.parse(localStorage.getItem(store_name)) //|| model; 37 | var updatedModel = update(action, model, data); // update model for action 38 | render(updatedModel, signal, ROOT); 39 | }; 40 | }; 41 | 42 | model = JSON.parse(localStorage.getItem(store_name)) || model; 43 | render(model, signal, ROOT); 44 | if (subscriptions && typeof subscriptions === 'function') { 45 | subscriptions(signal); 46 | } 47 | } 48 | 49 | /** 50 | * `add_attributes` applies the desired attribute(s) to the specified DOM node. 51 | * Note: this function is "impure" because it "mutates" the node. 52 | * however it is idempotent; the "side effect" is only applied once. 53 | * @param {Array./} attrlist list of attributes to be applied 54 | * to the node accepts both String and Function (for onclick handlers). 55 | * @param {Object} node DOM node upon which attribute(s) should be applied 56 | * @example 57 | * // returns node with attributes applied 58 | * input = add_attributes(["type=checkbox", "id=todo1", "checked=true"], input); 59 | */ 60 | function add_attributes (attrlist, node) { 61 | // console.log(attrlist, node); 62 | if(attrlist && Array.isArray(attrlist) && attrlist.length > 0) { 63 | attrlist.forEach(function (attr) { // apply all props in array 64 | // do not attempt to "split" an onclick function as it's not a string! 65 | if (typeof attr === 'function') { node.onclick = attr; return node; } 66 | // apply any attributes that are *not* functions (i.e. Strings): 67 | var a = attr.split('='); 68 | switch(a[0]) { 69 | case 'autofocus': 70 | node.autofocus = "autofocus"; 71 | node.focus(); 72 | setTimeout(function() { // wait till DOM has rendered then focus() 73 | node.focus(); 74 | }, 200) 75 | break; 76 | case 'checked': 77 | node.setAttribute('checked', true); 78 | case 'class': 79 | node.className = a[1]; // apply one or more CSS classes 80 | break; 81 | case 'data-id': 82 | node.setAttribute('data-id', a[1]); // add data-id e.g: to
  • 83 | break; 84 | case 'for': 85 | node.setAttribute('for', a[1]); // e.g: