[心得] 个人前后端开发心得 - 北港迎妈祖网站

楼主: Linux (Windows)   2016-04-14 12:17:26
Hi (),
很久没来版上 PO文章了 >"<
最近忙着帮忙我们家乡的活动制作网站,
几本上我是属于义务性帮忙、非官方、没盈利的自主服务(XD),
每一年的制作这个网站我算是不断自我突破吧(疑?),
从后端、系统、设计、切版、上稿,我尝试一个人完成!
话题扯远了,回到正题,这个网站我要分享的是前、后端以及系统部分,
如果内容不 OK 可以跟我讲一下喔!
http://mazu.ioa.tw/maps/dintao
从设计开始,我参考了 Material Design 的角度去设计版面以及流程,
不过当然的,手机与网页的表现还是会有些许的差异,
但是整体我仍然尽量参考规范XD
PHP 这次我就使用了很潮的 php7,跑起来貌似有变快,
因为我的爬虫变快了,所以整体来说算是很满意,
只是有些 function 需要稍做调整,不过大致上都很健康!
JavaScript 这次主力都在 Google Maps API 的运用,
因为三年前我将此地图资讯与庙会遶境路线做了结合,
开启了我对 Google Maps 运用的热爱,所以今年也是把他当主力,
活动当天没意外的话,我会结合 GPS 线上定位!
CSS 的部分,我则是使用 compass scss 去实作,
javascript 的话则是使用 jQuery 以及一些其他的 lib 实作!
因为前后端都自己包办,所以 Framework(CodeIgniter) 我做了一些修改,
让这些静态 css、javascript code 上 production 时候自动的 merge 以及 minify。
在静态档案的处理,我利用 S3 强大的空间功能,
将网站的图档资源、js、css 都上到 S3 以减少 EC2 的 Loading,
所以说,S3 上的 js、css 都是已经 minify 的了,
而图片档若是遇到大档案,则利用 TinyPNG 去对图片做压缩,然后再上传到 S3,
对了,以上当然是用程式跑的:)
再来则是 HTML,基本上网站前台都是使用大量的文章以及简介,
所以可以做大量的 cache,然后这部分采用 file cache 而已,
虽然我有原本打算使用 Redis 去实作,但是我把内存留给 MySQL 了..
(我没开 RDS,MySQL 是上在与 Server 同一台的 EC2)
因为有作 output 的 cache,所以我也顺便将 HTML minify 囉,
因为做 HTML 的 output cache,所以浏览人数的纪录就不能跑 php 做 +1,
所以这部分我使用 Ajax 去实作回传人气的纪录!
最后 SEO,以及相关搜寻的设定,robots.txt、Sitemap 不用讲,一定会做,
这次我还加入了一点点的 schema、Google AMP、JSON-LD 的结构,
这些都是去喂 Search Engine 想吃的菜!
其实过程中我学到很多经验,也尝试很多架构,这次我使用 AWS 的服务,
主要开了一台东京 t2.micro 的 EC2,以及使用 S3 的服务而已,
网页流量,据我看 GA 的即时人数,最高曾经落在 1900 多人,
可能有些页面是使用 S3 吧,所以都撑得住!
这是目前我个人做过最高流量的网站,相对的也是个人里程碑!
以上是我的经验、心得分享, 回到做网站初衷,我只是个热爱故乡的乡土文化,
想为家乡尽一分力,利用自己的专长技术,支援这个从小的信仰,如此简单。
文章有点太长,如果看到这里的朋友,非常感谢您将它看完,
如果大家有想要来北港玩的,倒是可以看看网站内容喔!
以下是我的 GitHub 资源:https://github.com/comdan66/mazu
网站 Demo:http://mazu.ioa.tw/
若是文章不适合再版上讨论的话,可以跟我说一下 >"<
有问题或疑问的话,非常欢迎各位讨论喔:)
作者: YahooTaiwan (超可爱南西我老婆)   2016-04-14 12:25:00
不是很喜欢看到控制码...
作者: aids61517 (奇欧巴肯)   2016-04-14 12:33:00
未看先推大大的作品
作者: rurikaxx (DavidLuo)   2016-04-14 12:45:00
技术面的东西听起来还不错 好奇是几年经验的工程师?
楼主: Linux (Windows)   2016-04-14 12:48:00
我 78年次,没读研究所XD我的简历 http://ioa.tw
作者: kusozack (hetun)   2016-04-14 13:20:00
网站还不错 不过怎么会知道我 我只是默默潜水的小朋友
作者: dnabossking (少狂)   2016-04-14 13:22:00
ㄧ楼的大大说了
作者: yfr   2016-04-14 13:26:00
东西做得不错,但我也是不喜欢控制码
作者: vn509942 (如履薄冰)   2016-04-14 13:27:00
挺棒的
作者: kusozack (hetun)   2016-04-14 13:32:00
控制码?
作者: SoftMen (软男)   2016-04-14 13:40:00
你看第一页最下面▲此页内容会依阅读者不同,原文未必有您的资料这就是有控制码
作者: michealking (GG了)   2016-04-14 14:31:00
怀念控制码~~~~~
作者: racering (赛车手)   2016-04-14 15:28:00
是在叫我?
作者: Ekmund (是一只小叔)   2016-04-14 15:42:00
我不是前端的 但个人建议 可以的话 尽量不要一堆资讯挤一页 效果跟满是字的ppt一样...
作者: jakert123 (kaka3315)   2016-04-14 15:52:00
作者: coronach (...)   2016-04-14 16:46:00
半个北港人推
作者: xevisu (大绿半糖少冰thx)   2016-04-14 17:34:00
太神啦~~~
作者: storyn26383 (贩卖机)   2016-04-14 18:46:00
您怎么没有写到解析别人网站原始码来取得 GPS 定位资讯的部份呢
作者: bndan (seed)   2016-04-14 18:49:00
如果楼上属实..这在前端算蛮严重的事= =
作者: abc0922001 (中士abc)   2016-04-14 21:01:00
推~~
作者: atpx (秋雨的心情)   2016-04-14 21:06:00
强~~
作者: chrome (老大是Google)   2016-04-14 21:22:00
看这风格和 Google Map, 马上想到之前的大富翁游戏没想到一查 真的示原作 XD
作者: simpleJA (JA)   2016-04-15 00:53:00
感谢分享,推
作者: storyn26383 (贩卖机)   2016-04-15 02:05:00
请问楼主怎么回了文又自删掉了呢?
作者: dlikeayu (太阳拳vs野球拳)   2016-04-15 06:31:00
不错,行动派的
作者: polppk (老汤爱老包)   2016-04-15 07:41:00
同为78年北港人工程师推XD
楼主: Linux (Windows)   2016-04-15 08:14:00
回s大,因为那问题跟此篇无关啊s大有兴趣的话,可自开一篇与版众讨论
作者: storyn26383 (贩卖机)   2016-04-15 09:27:00
那不好意思我想请问,您说的上次的事件是指?所谓的已经发表过声明又是指?
作者: missdian (心诚则灵)   2016-04-15 10:43:00
北港人推!谢谢你为家乡尽一份心 :)
作者: rurikaxx (DavidLuo)   2016-04-15 15:13:00
js怕被偷就不要写web 怕热就不要当厨师
作者: storyn26383 (贩卖机)   2016-04-15 15:39:00
回 r 大,原 PO 并没有偷别人的 JS,请不要误会原 PO
楼主: Linux (Windows)   2016-04-15 17:00:00
回r大,不是故意 minify 而是降低网络传输成本你可以使用 http://tinyurl.com/m65jex6 试试连 Google 都会建议你 css、js、img 都压缩比较好若r大想看我的 js,直接到我的 GitHub 看就好啦~
作者: peterlai (彼得)   2016-04-15 18:25:00
很好奇phpQuery使用上资源消耗会比XPath小吗?!
作者: rurikaxx (DavidLuo)   2016-04-16 11:12:00
我不是在呛原PO..我是在呛正义魔人XD 我觉得原PO很棒棒正义魔人不喜欢js被偷的话 就不要写web附带一提..保护js会用js混淆工具 minify只是降低流量XD
作者: storyn26383 (贩卖机)   2016-04-16 11:56:00
回 r 大,所以我说了………原 PO 没有偷别人 JS 啊………而且好像没有任何地方讲到 JS 被偷耶@@
作者: reLINK (戒骄戒躁)   2016-04-16 12:02:00
不喜欢控制码...
作者: arenda (phantom in my heart)   2016-04-16 12:12:00
minify都不懂的人在那该该叫 看到都笑了
作者: storyn26383 (贩卖机)   2016-04-16 12:24:00
minify 之后的 js 丢到格式化工具就回来了啊,只是变量丑了点,所以是没有任何保护作用的唷
作者: GoalBased (Artificail Intelligence)   2016-04-16 14:54:00
你说的是ugly吧? 楼上
楼主: Linux (Windows)   2016-04-16 14:59:00
前端 js 有一个步骤 就是 uglify,基本上都会跟 minify一起实作,minify 是缩成一行,uglify 则是丑化亦或者是说简化,将不必要的 function name 简写,当然还有很多细节但两这都是在提升前端传输效能之类的,有兴趣可以查一下XD
作者: storyn26383 (贩卖机)   2016-04-16 15:24:00
回 g 大,抱歉我没有讲清楚,不过原 po 帮我补完了
作者: GoalBased (Artificail Intelligence)   2016-04-16 15:52:00
不过感觉好像有推文被删掉了,印象中有个虚的
楼主: Linux (Windows)   2016-04-16 16:29:00
嘘的那个,我私下跟他解释完了,没事:)
作者: ilovekebi   2016-04-16 19:00:00
push~
作者: lensuper (莫三)   2016-04-16 20:08:00
这 ... 能不推吗 LoL 最近也在学前后端XD感觉C语言就让他去了XD
作者: WolfLord (呆呆小狼￾ ￾ N￾ ￾ )   2016-04-17 22:18:00
我喜欢用server side,js只拿来排版面,爱偷就偷去。
作者: bboys1101 (霹雳男孩)   2016-04-20 09:19:00
很棒的作品耶,心得笔记也很值得参考
作者: sliok9520   2016-04-20 10:29:00
作者: roger00 (Stage Column(?))   2016-04-20 20:47:00
推分享!
作者: jiahansu (Jiahan)   2016-05-01 11:27:00
是找我吗??

Links booklink

Contact Us: admin [ a t ] ucptt.com