<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="16700" data-post-id="16700">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="robotarmy" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/robotarmy/120/3044_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  robotarmy
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>As a user of phoenix I would like the phoenix developers to focus on elixir code and not javascript build tools.</p>
<p>As a front end developer I know there are so many different ways to hook in the javascript and so many different ways to build UI in browsers and so please don’t make phoenix have this complexity.</p>
<p>Instead of complex javascript/node integration Use something simple and reliable with documentation and make it easy to remove - something like brunch.</p>
<p>Then I can rip it out and replace it with webpack or as the gentleman here has done ‘npm tasks’.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="16700" data-batch-url="/posts/batch_likers">
                        7
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/potentially-removing-brunch-from-the-phoenix-new-template-generator/2454/32">Post #31</a>
	                </div>
	            </div>
              <div id="likers-container-16700" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="16700"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #31"></div>
  </section>
</div>
    <div class="postbit" id="16832" data-post-id="16832">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="DanCouper" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/DanCouper/120/1880_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  DanCouper
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>My 10c here. For context I am a front end developer, there are around 50 other FE devs at my company, and we work on several farly complex application platforms. I work on top of a C# codebase, but I don’t think the the backend is particularly relevant to this discussion - we face the same set of issues that having an Elixir/Phoenix based codebase would have as regards frontend.</p>
<p>I guess every non-junior dev at our company, and almost every non-junior FE dev I know has seen the “just use use NPM scripts” article referenced in the first post. And everyone reads it, thinks “isn’t that a great idea! Why am I using webpack/gulp/etc” and implements it in a few small projects, and it works great. Then you try to use it on a non-trivial project, and you start to hit issues. <em>The NPM scripts approcach does not scale, it is fragile, and it gets complex <strong>really</strong> quickly.</em> It seems a really simple solution, because it is. In the same way as [<em>eg</em>] awk or sed or ed are.</p>
<p>All of the current solutions are substandard in some way - WebPack get complex <em>fast</em>, Brunch just builds stuff, Gulp is Gulp (hello enormous config files). But Brunch is simple enough to do any common task with almost zero config - if I want to add, say, Scss support, it is a single line - no other FE build system can currently provide that. Webpack is arguably better for anything moderately complex (eg I need to unit test everything, so I’ve got to go there), but then the setup is still horribly complex. NPM is <em>too low level</em>; it gets more and more complex until the point that you build a build system. If you have 60 lines of NPM script, there’s gonna be an issue giving that to someone else. As an example - how do glue all of these ES6 modules together? I <em>personally</em> know how to do it, but then, if I write an NPM script that lints, transpiles then concatenates, it’s going to be utter gibberish. If I do that with a taskrunner or build tool, it will not be.</p>
<p>I think I’ve been spoilt a bit by Elixir (and Rust, and Go to some extent), where I have a language with a build system and test framework and built in documentation, and it all works somewhat seamlessly; there are simple answers that provide solutions that work in the majority of cases. There is one way to do things, and it works, out-of-the-box.</p>
<p>With JS, it’s a massive mess. You need some kind of build system that is simple, allows for flexibility, and isn’t complex to introduce that flexibility. It’s needs to be high-level. NPM scripts are simple (in the same way bash scripts are simple), and they allow flexibility if you type out the magic utterances, but adding/modifying functionality is painful and means modifying things at root level; it is in no way high level.</p>
<p>Brunch is pretty good - it’s pretty fast, it’s very easy to understand, it’s had a very long time for issues to be known and understood. Critically, it’s really easy to replace; it’s not like the asset pipeline, it’s not baked in. A canonical set of articles on how to replace with NPM Scripts/Webpack/Gulp/taskrunner-du-jour would possibly be the most useful thing that could exist re this issue.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="16832" data-batch-url="/posts/batch_likers">
                        13
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/potentially-removing-brunch-from-the-phoenix-new-template-generator/2454/33">Post #32</a>
	                </div>
	            </div>
              <div id="likers-container-16832" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="16832"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #32"></div>
  </section>
</div>
    <div class="postbit" id="17068" data-post-id="17068">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="OvermindDL1" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/OvermindDL1/120/2677_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  OvermindDL1
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="DanCouper" data-post="33" data-topic="2454">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dancouper/48/1880_2.png" class="avatar"> DanCouper:</div>
<blockquote>
<p>I think I’ve been spoilt a bit by Elixir (and Rust, and Go to some extent), where I have a language with a build system and test framework and built in documentation, and it all works somewhat seamlessly; there are simple answers that provide solutions that work in the majority of cases. There is one way to do things, and it works, out-of-the-box.</p>
</blockquote>
</aside>
<p>Would be nice to have a mix/cmake/cargo/findlib/etc…/etc…/etc… system for building assets.  ^.^</p>
<p>Too many already exist though, blehg.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="17068" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/potentially-removing-brunch-from-the-phoenix-new-template-generator/2454/34">Post #33</a>
	                </div>
	            </div>
              <div id="likers-container-17068" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="17068"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #33"></div>
  </section>
</div>
    <div class="postbit" id="17171" data-post-id="17171">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jdumont" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jdumont/120/2353_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jdumont
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I stumbled on that same article a while back and took the chance to use just npm with a new project I was starting at the time. Back then, I was a complete beginner, and I personally found setting up npm scripts easier than incorporating a dedicated builder, simply because there was no “magic”.</p>
<p>These days however, I tend to use a builder. Which one depends on what I’m doing. A do a lot of work with Meteor, so lean on that, although have used Brunch and Webpack with JS projects as well as Phoenix projects. I can’t say I’m ever had a problem, other than Webpack being incomprehensible! <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="17171" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/potentially-removing-brunch-from-the-phoenix-new-template-generator/2454/35">Post #34</a>
	                </div>
	            </div>
              <div id="likers-container-17171" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="17171"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #34"></div>
  </section>
</div>
    <div class="postbit" id="27527" data-post-id="27527">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="christiansakai" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  christiansakai
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Just want to add my 2-cents: I’m primarily a JS dev.</p>
<p>Did Grunt, Gulp, Webpack, Brunch. Hated all of those. I hate setting up build scripts. It is buggy, has many edge cases, inconsistencies between machines and OS, don’t play well to one another. Tried npm scripts, same thing, and actually get complicated real quick, then people put packages such as “better-npm” and bunch of other nonsense.</p>
<p>I really really appreciate the decision made by the Phoenix team, which to just stick with Brunch that just works. Simple, KISS, and I just want to get my work done. If I need something better later, I can just always remove it.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="27527" data-batch-url="/posts/batch_likers">
                        5
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/potentially-removing-brunch-from-the-phoenix-new-template-generator/2454/36">Post #35</a>
	                </div>
	            </div>
              <div id="likers-container-27527" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="27527"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #35"></div>
  </section>
</div>
    <div class="postbit" id="30872" data-post-id="30872">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kashif" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kashif
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I have been using “npm” as my build tool for some time now. All one needs to do is write some custom build code (just a few lines) and use the numerous npm package to do whatever one wants with the source files. I create css bundles, js bundles, use SCSS, Rollupjs etc. with no problem. I created a recipe once and use it in every new project I start.</p>
<p>I am not going back to gulp etc. NPM is much simpler and more powerful. And far fewer problems with broken dependencies in the build system.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="30872" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/potentially-removing-brunch-from-the-phoenix-new-template-generator/2454/37">Post #36</a>
	                </div>
	            </div>
              <div id="likers-container-30872" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="30872"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #36"></div>
  </section>
</div>
    <div class="postbit" id="66897" data-post-id="66897">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="danschultzer" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/danschultzer/120/4942_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  danschultzer
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Pow Core Team</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Ok, so it seems like the brunch project is dead at this point?</p>
<p>Many of their libraries (at least the ones we’re using) are not maintained at all, with few or no releases over the last half year, and it’s especially evident in the last 3 months.</p>
<p>E.g., on our production app, we’re using sass. To get that working we’ve had to pull the master branch to <a href="https://github.com/brunch/sass-brunch/pull/158" rel="noopener nofollow ugc">get it to compile</a>. This is an issue everybody will experience if they use recent nodejs version, but there has been no release for a year.</p>
<p>I feel that a simple build tool with NPM scripts would be far the best solution for Phoenix. But at least switching to a well-maintained library like webpack would be much better. Brunch has been a painful experience for us, and I don’t think Phoenix should default new users to it.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="66897" data-batch-url="/posts/batch_likers">
                        9
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/potentially-removing-brunch-from-the-phoenix-new-template-generator/2454/38">Post #37</a>
	                </div>
	            </div>
              <div id="likers-container-66897" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="66897"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #37"></div>
  </section>
</div>
    <div class="postbit" id="66923" data-post-id="66923">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="gpb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/gpb/120/3062_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  gpb
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>As someone with a foot in both the front and back-end worlds, I found it easier to work with a webpack + Phoenix combo in the end. It just seems to work smoother with Sass, PostCSS, Vue.js, React, etc. I also use a lot of NPM scripts, all organized in package.json.</p>
<p>That said, it is pretty easy to swap out brunch for webpack, maybe a few minutes once you get used to it. Maybe a detailed tutorial in the formal Phoenix documentation might help people in that sense.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="66923" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/potentially-removing-brunch-from-the-phoenix-new-template-generator/2454/39">Post #38</a>
	                </div>
	            </div>
              <div id="likers-container-66923" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="66923"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #38"></div>
  </section>
</div>
    <div class="postbit" id="66924" data-post-id="66924">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="brightball" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/brightball/120/17192_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  brightball
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>As somebody who works with a lot of front end devs but generally tries to stay out of the way, the two options I would strongly favor would be:</p>
<ol>
<li>
<p>The one with the fewest outside dependencies that won’t suffer from JS project of the week syndrome and keeps things simple (npm build)</p>
</li>
<li>
<p>The one with the highest adoption that is clearly stable (webpack)</p>
</li>
</ol>
<p>There is a part of me that really wants to favor the npm only solution but the pragmatic part of me says Phoenix should focus on Phoenix and defer to JS tooling rather than make JS decisions. From everything people tell me, Webpack is what the world of Node seems to be coalescing around.</p>
<p>For me, I use so little JS that I’ll vote for whatever y’all decide to include. The above is just my “sensible defaults” perspective.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="66924" data-batch-url="/posts/batch_likers">
                        6
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/potentially-removing-brunch-from-the-phoenix-new-template-generator/2454/40">Post #39</a>
	                </div>
	            </div>
              <div id="likers-container-66924" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="66924"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #39"></div>
  </section>
</div>
    <div class="postbit" id="67007" data-post-id="67007">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="regal" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  regal
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>webpack 4 (still in alpha) is moving towards a zero config default, some details here: <a href="https://www.valentinog.com/blog/webpack-4-tutorial/" rel="noopener nofollow ugc">https://www.valentinog.com/blog/webpack-4-tutorial/</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="67007" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/potentially-removing-brunch-from-the-phoenix-new-template-generator/2454/41">Post #40</a>
	                </div>
	            </div>
              <div id="likers-container-67007" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="67007"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #40"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/2454/load_more?page=5">Load more posts (8 remaining)</a>
</div></template></turbo-stream>