I’m mainly a backend programmer. The only serious frontend programming I’ve done was using Cappuccino, which allowed me to not learn all the things that frontend programmers know.
(AWS is very much this way, too.)
I was hoping I could pick up the frontend ecosystem the way I did SQL[*] and AWS: learning driven by particular problems. That doesn’t seem to be working. So I’m asking for suggestions for a more systematic course of study that would get me to the point where I could include and use some random jquery widget with ease. (My eventual goal is to use Elm as my main frontend technology, but I think it can’t insulate me from the ecosystem.)
[*] When I got my degree, 1981, only losers in the Management Information Systems school learned SQL. Real Programmers did operating systems, compilers, and networking code. Things have changed a bit.
There are a lot of resources. These may be handy for learning the fundamentals.
There’s probably a good bit on YouTube. https://www.codeschool.com and https://teamtreehouse.com offer video based training. Not sure how much free content they have. There should be other sites that have video based training if these aren’t options for you. Hope that helps.
With that being said, what is your goal? If your goal is to be a fullstack developer role that also deals with front end, I suggest learning technologies that are stable and being used widely in production. In this case, I suggest forget about Elm for now.
What kind of front end you want to create?
If you just want to create a static rendered web apps, you will need:
- jQuery for DOM manipulation
- React for easy view rendering
- you probably don’t need to manage state that complex since it is a server-rendered app mainly
- Use ES6 syntax (more pleasant to write and probably you will feel at home since ES6 syntax is closer to server-side language like Java)
- React for view rendering
- React Router for routing
- Use ES6 syntax (same reason above)
- Flux/Redux for state management
Beware of this, many flux/redux implementations requires glue-code/library specific flavor for this. For example, adding Redux will require you to add Redux-Router on top of React-Router. This is just one example among many bajillion dependencies that you probably need to use. Therefore I advocate using MobX (just plug and play and just works, no need many other flavor specific stuff to glue stuff together)
Now lets talk about CSS:
- Just use premade CSS framework such as Bootstrap/Foundation/Semantic-UI (the easiest to use is Boostrap, also the most widely used) for now, stick it there on the stylesheet, and just put classes on the HTML tags
- If you want to change some styling, just override the pure CSS, no need fancy stuffs.
- Later on if you want to get fancy, I personally prefer SASS, Bourbon, and Burrito (basically a CSS authoring libraries with conventions)
Now lets talk about NPM and Brunch:
- Brunch -> does minification, concatenation, etc, automatically so you don’t have to worry about that. There is webpack that most people use, but stay away from that if you are just beginning to learn front-end (it will be with much much much pain and crazy confgurations)
I personally do Elixir/Elm. Redux was modeled after Elm and is react-like as well.
CSS is just SCSS for me. I like simple setups.
I read you do a bit of teaching - would love to see some material on Elixir with Elm if you get the time for it
Heh, been tempted. I used to have a blog a decade ago but shut it down about as long ago too. I just set up another site a few days ago at http://blog.overminddl1.com/ that has nothing on it whatsoever yet (and needs a theme overhaul, if anyone wants to pick out some good colors from here for it (the primary color is the top brown blob and the secondary color is the blue stuff, I am no artist) then I’d be appreciative. But now that I have it I just need to start filing it with content. Unsure where to start, as always. ^.^
And the teaching is actually not in elixir/elm but various little languages for various game things like gdscript (Godot), java, python, haxe, and others. Though I would like to hope that I teach things well (regardless of how many stupid designs I realize I have looking back). ^.^
I would recommend some online courses for start. Some are free.
Thanks. I have a little bit of a niche of adopting tech early (Ruby in 2001, for example). It’s served me well - but I’m usually a consultant and book-writer, rarely a production programmer.
That said, this app is something I plan to make money from, selling to a niche market. But because of my other interests, I’m willing to take a risk on Elm.
At least one person is working on a book on Phoenix+Elm. Don’t know how far along it is.
In my opinion you should consider starting small and not try to bite off the whole stack at once.
Your next step would be minification.
At the point you do that you’ll start to notice things that you wish could be a little easier or problems that you want to solve. It’s only at that point where you’ll know what you really want out of any Frontend tools and then you’ll understand the benefits.
You’ll also know how easy things really are and that you don’t need 95% of the things that most projects anchor themselves too. The vast majority of web apps are “open, check, close” experiences that don’t come near warranting everything thrown at them today.
In that case then you can forget all the things that I mentioned and go for Elm.
I think Elm will take care all the HTML/CSS/JS side for you, so you can focus on building the app using the Elm language itself.
Going this route, this means you will be creating a dynamic (not server rendered) apps.
“you should consider starting small and not try to bite off the whole stack at once” is probably sensible advice. I’m at a point in my life and career where I don’t have to be sensible. (I don’t mean that in any sort of an insulting or snarky way: I really am fortunate that I can gamble that I can continue to get away without, say, learning CSS at all well.)
I’d be very interested in your react-ish approach that comprises phoenix, elm, and modular/component templating.
I find Vue to be easier to grok than react, with all the benefits of react (minus US market share) and more. The 2.0 guide is easy to understand, too.
Wouldn’t this “undo” the benefits of using Phoenix in the first place? As a beginner, this is something I’m really struggling to understand. I don’t need to build complicated apps, and Elm seems like an amazing way to continue to build my FP skills, but I want to do right by Elixir/Phoenix first, because I trust this community will evolve faster and go further than Elm in the coming years.
You will leverage Phoenix benefits regardless if you are rendering the HTML on the client or on the server. In one way or the other, you need to get data from the server to the client, be it in HTML or JSON (or something else), and Phoenix is going to excel that. You also need to write business rules and validations on the server and Phoenix/Ecto can help you too.